问题叙述性说明

我们会form该input和checkbox提交给异步数据phpserver。处理后的回。

提交之后显示的位置：

难点分析

採用from表单的onsubmit属性阻止表单的提交


<form action="http://www.baidu.com" onsubmit="return check()">

通过check函数的return false;操作阻止表单的提交，实现不刷新提交数据的目的。


获取复选框选中的选项的值


checkbox标签部分：

	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>

javascript处理部分：

		var str = document.getElementsByName("checkbox");

		var answer = "";

		for(var i=0;i<str.length;i++)

		{

			if(str[i].checked == true)

			{

				answer += str[i].value;

			}

		}

		if(answer == "")alert('请勾选答案。然后提交');

		else

		{	//用户勾选了相关答案，进行相关处理

			var xmlhttp;

採用ajax技术与后台进行交互


	var xmlhttp;

			xmlhttp = new XMLHttpRequest();

			xmlhttp.open("POST","function.php",true);

			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

			xmlhttp.send("qid="+qid+"&answer="+answer);

			xmlhttp.onreadystatechange=function()

			  {

			  if (xmlhttp.readyState==4 && xmlhttp.status==200)

			    {

			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

			    }

			  };

完整代码

前台index.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Koastal</title>

</head>

<body>

<form action="http://www.baidu.com" onsubmit="return check()">

问题序号：<input type="text" id="qid"><br/>

选项：<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>

	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>

	  <input type="submit" value="提交">

</form>

<div id="myDiv"></div>

<script type="text/javascript">

	function check()

	{

		var qid = document.getElementById("qid").value;

		var str = document.getElementsByName("checkbox");

		var answer = "";

		for(var i=0;i<str.length;i++)

		{

			if(str[i].checked == true)

			{

				answer += str[i].value;

			}

		}

		if(answer == "")alert('请勾选答案，然后提交');

		else

		{	//用户勾选了相关答案。进行相关处理

			var xmlhttp;

			xmlhttp = new XMLHttpRequest();

			xmlhttp.open("POST","function.php",true);

			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

			xmlhttp.send("qid="+qid+"&answer="+answer);

			xmlhttp.onreadystatechange=function()

			  {

			  if (xmlhttp.readyState==4 && xmlhttp.status==200)

			    {

			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

			    }

			  };

		}

		 return false; 

	}

</script>

</body>

</html>

后台function.php

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>koastal</title>

</head>

<body>

<?php

	$qid = intval($_POST["qid"]);

	$answer = trim($_POST["answer"]);

	echo "您提交的题目编号是".$qid."，答案是".$answer;

?>

</form>

</body>

</html>

效果显示：


版权声明：本文博客原创文章，博客，未经同意，不得转载。

采纳ajax提交POST样本数据的更多相关文章

  1. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  2. Ajax 提交KindEditor的数据

    这次我是在EasyUI中使用了KindEditor的编辑器,按照官方给的代码,总是无法获取编辑器里面的值(内容),如下:         KindEditor.ready(function (K) { ...

  3. jquery实现ajax提交表单信息

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...

  4. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  5. 【ajax 提交表单】多种方式的注意事项

    在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...

  6. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  7. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  8. 验证控件,解决用于ajax提交前的验证，不是submit提交的验证

    //解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...

  9. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

随机推荐

  1. 网页信息抓取进阶 支持Js生成数据 Jsoup的不足之处

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23866427 今天又遇到一个网页数据抓取的任务,给大家分享下. 说道网页信息抓取 ...

  2. 生命游戏（两），有一种东西叫CCScrollView

    订婚app要么game'肯定不会陌生:CCScrollView并且CCTableView. 假如我不知道是什么CCScrollView,再看看testcpp要么testlua样品棒. 先说说CCScr ...

  3. HYSBZ 2243 染色 （树链拆分）

    主题链接~~> 做题情绪:这题思路好想.调试代码调试了好久.第一次写线段树区间合并. 解题思路: 树链剖分 + 线段树区间合并 线段树的端点记录左右区间的颜色.颜色数目.合并的时候就用区间合并的 ...

  4. 解决 U盘安装Windows Server 2012 R2 报错 Windows 无法打开所需的文件 Sources\install.wim

    报错原因: 使用UltraISO等软件刻录镜像时默认使用FAT32文件系统,该系统不支持大于4G的文件, 而Server 2012 R2的安装文件install.wim为5.12G,固安装失败. 解决 ...

  5. gdb经常使用的命令

    在调试程序的时候,gdb是一柄利器,恰当的使用gdb能够解决掉程序的很多bug. gdb并不检查语法错误.那是gcc或者g++的事情,gdb干的是调试的事情. 说明: (1)gdb 程序名 [core ...

  6. 代理下载android4.4源代码

    前提条件:需要有user, password, 代理人serverip和port(这一切都使自己的软件来完成下一个.例如freegate,它拥有一套可以自己作为一个代理server.创user/pas ...

  7. hdu2665-Kth number

    Kth number Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. SQL Server 2008 /SQL Server 2008 R2 配置数据库邮件

    原文:SQL Server 2008 /SQL Server 2008 R2 配置数据库邮件 从2005开始,就引入了"数据库邮件"功能.并且取代SQLMail.原有SQLMail ...

  9. K60 启动过程分析

    很高兴老师借给我一K60的开发板,趁着暑假好好鼓捣鼓捣! 有了上图的过程分析我想心里大概有个低了吧! 以下看代码: /* CodeWarrior ARM Runtime Support Library ...

  10. Java使用串行编程操作继电器

    首先,我们必须建立一个良好的环境,那是,jdk并且tomcat.如果它不必须是web装了! 还有就是配置,也就是默认的comm.jar ,javax.comm.properties , win32co ...