问题叙述性说明

我们会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. JAVA经BigDecimal圆角的解决方案及注意事项

    /** * @Description: 四舍五入住宿2小数位数 * @param valueName * @return */ public static Double formateDouble45 ...

  2. Android - 支持不同的设备 - 支持不同的屏幕

    Android整体上按照两大类来分类设备屏幕:尺寸和分辨率.app在设备上运行应该考虑大小和分辨率.同样的,你应该包含不同的资源来让app适应不同的屏幕大小和分辨率. 整体上有四种尺寸:小的,正常的, ...

  3. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  4. POJ 3177 Redundant Paths - from lanshui_Yang

    Description In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numb ...

  5. Linux tcpdump命令具体解释

    简单介绍 用简单的话来定义tcpdump,就是:dump the traffic on a network,依据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump能够将网络中传送的数据 ...

  6. [three.js] 地图不能解决重复的问题 Solving with Texture RepeatWrapping Fail Issue

    有些事情,如果你正在寻找侯,怎么也找不到. 有的东西,不经意间,到处: 我认为这是生活中常有的事. 然而,在互联网的浩瀚大海,这同样适用. 正常的一小会儿的积累, 投入少, 积累, 洋大海, 载起一帆 ...

  7. Oracle Product Hub / Product Lifecycle Management / Product Information Management / Advanced Produc

    In this Document   Goal   Solution   1. Master List showing sample code for APIs in Product Data Hub ...

  8. oracle一视图性能问题

    oracle一些性能视图的解释  --关于是否收集 timed_statistics参数:用于决定是否收集相关的时间参数,true为收集.如果该参数设为false,则等待事件相关视图也就无法收集到数据 ...

  9. 懵懵懂懂初识J2EE

    一.定义 Java2平台包含:标准版.企业版.微缩版.当中J2SE是Java2的标准版,主要用 于桌面应用软件的编程:J2ME是微缩版,主要应用于嵌入式系统开发:还有这次学习的J2EE是Java2的企 ...

  10. iOS_38_手势

    Pan平移手势 终于效果图: Swipe轻扫手势 LongPress长按手势 Pinch和Rotation手势 捏合(缩放)和旋转 终于效果图: 涂鸦 终于效果图: 事件分3大类:触摸.加速计.远程遥 ...