问题叙述性说明

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

提交之后显示的位置：

难点分析

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


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

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


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


checkbox标签部分：

  1. 	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>
  2.  
  3. 	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>
  4.  
  5. 	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>
  6.  
  7. 	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>

javascript处理部分：

  1. 		var str = document.getElementsByName("checkbox");
  2. 		var answer = "";
  3. 		for(var i=0;i<str.length;i++)
  4. 		{
  5. 			if(str[i].checked == true)
  6. 			{
  7. 				answer += str[i].value;
  8. 			}
  9. 		}
  10. 		if(answer == "")alert('请勾选答案。然后提交');
  11. 		else
  12. 		{	//用户勾选了相关答案，进行相关处理
  13. 			var xmlhttp;

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


  1. 	var xmlhttp;
  2. 			xmlhttp = new XMLHttpRequest();
  3. 			xmlhttp.open("POST","function.php",true);
  4. 			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  5. 			xmlhttp.send("qid="+qid+"&answer="+answer);
  6.  
  7. 			xmlhttp.onreadystatechange=function()
  8. 			  {
  9. 			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  10. 			    {
  11. 			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  12. 			    }
  13. 			  };

完整代码

前台index.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Koastal</title>
  6. </head>
  7.  
  8. <body>
  9. <form action="http://www.baidu.com" onsubmit="return check()">
  10. 问题序号：<input type="text" id="qid"><br/>
  11. 选项：<br/>
  12. 	  <input type="checkbox" name="checkbox" id="multi-choiceA" value="A">选项A<br/>
  13.  
  14. 	  <input type="checkbox" name="checkbox" id="multi-choiceB" value="B">选项B<br/>
  15.  
  16. 	  <input type="checkbox" name="checkbox" id="multi-choiceC" value="C">选项C<br/>
  17.  
  18. 	  <input type="checkbox" name="checkbox" id="multi-choiceD" value="D">选项D<br/>
  19.  
  20. 	  <input type="submit" value="提交">
  21. </form>
  22.  
  23. <div id="myDiv"></div>
  24.  
  25. <script type="text/javascript">
  26. 	function check()
  27. 	{
  28. 		var qid = document.getElementById("qid").value;
  29. 		var str = document.getElementsByName("checkbox");
  30. 		var answer = "";
  31. 		for(var i=0;i<str.length;i++)
  32. 		{
  33. 			if(str[i].checked == true)
  34. 			{
  35. 				answer += str[i].value;
  36. 			}
  37. 		}
  38. 		if(answer == "")alert('请勾选答案，然后提交');
  39. 		else
  40. 		{	//用户勾选了相关答案。进行相关处理
  41. 			var xmlhttp;
  42. 			xmlhttp = new XMLHttpRequest();
  43. 			xmlhttp.open("POST","function.php",true);
  44. 			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  45. 			xmlhttp.send("qid="+qid+"&answer="+answer);
  46.  
  47. 			xmlhttp.onreadystatechange=function()
  48. 			  {
  49. 			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  50. 			    {
  51. 			    	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  52. 			    }
  53. 			  };
  54. 		}
  55.  
  56. 		 return false; 
  57.  
  58. 	}
  59. </script>
  60. </body>
  61. </html>

后台function.php

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>koastal</title>
  6. </head>
  7.  
  8. <body>
  9. <?php
  10. 	$qid = intval($_POST["qid"]);
  11. 	$answer = trim($_POST["answer"]);
  12. 	echo "您提交的题目编号是".$qid."，答案是".$answer;
  13. ?>
  14. </form>
  15. </body>
  16. </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. Linux 编程学习笔记----过程管理和项目发展（在）

    转载请注明出处,http://blog.csdn.net/suool/article/details/38406211,谢谢. Linux进程存储结构和进程结构 可运行文件结构 例如以下图: 能够看出 ...

  2. UVA305 - Joseph(数论 + 打表)

    UVA305 - Joseph(数论 + 打表) 题目链接 题目大意:约瑟夫环问题:n个人围成一圈,每次都淘汰第m个人,问最后一个幸存下来的人的编号. 这题的意思有点不一样,它规定前面的k个人是好人, ...

  3. axWindowsMediaPlayer1获取音频长度

    OpenFileDialog openFileDialog1 = new OpenFileDialog { InitialDirectory = "c:\\", Filter = ...

  4. C# DataTable详细用法

    通过经常使用的项目中的DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTab ...

  5. SQL Server 2005,2008 正则表达式 替换函数应用详解

    CREATE function dbo.regexReplace ( @source ntext, --原字符串 ), --正则表达式 ), --替换值 , --是否是全局替换 --是否忽略大小写 ) ...

  6. ThreadPoolExecutor的一点理解

    整个ThreadPoolExecutor的任务处理有4步操作: 第一步,初始的poolSize < corePoolSize,提交的runnable任务,会直接做为new一个Thread的参数, ...

  7. java这些东西发展（1）-------大约ORA00604和ORA12705

    ******************************有关myEclipse和oracle在连接发生的一个问题********************************* 用户界面显示的评 ...

  8. COCOFrame

    COCOFrame它是一个轻量级的开发框架,综合Android APP开发过程中经常使用的工具,方法,特效.当中F类採用的AndroidQuery实现,做了进一步的封装及部分优化. 1. Jar包大小 ...

  9. 如何使用Google APIs和Google应用系统集成(7)----在里面JSON兑换XML数据处理，JSON数据包括违规XML数据规范：XML节点名称不支持号码Java解

    笔者电话Google Calendar APIs的GetColors方法,其中(有关详细信息Google Calendar API已经Google API看到我的博文介绍的其余部分,目前,我们只取Go ...

  10. 5次Shift会触发粘滞键的妙用（转）

    1.前提 你可以在平时亲身接触状态电脑,哪怕是在电脑主人不在的时候(虽然主人不在,或者关机了,进入电脑是要密码的). 2.原理 利用电脑连续按5次Shift会触发粘滞键,它会运行c:\winows\s ...