问题叙述性说明

我们会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. MSSQL连接字符串,你真的清楚吗?

    原文:MSSQL连接字符串,你真的清楚吗? 几年前当我第一次面试时,考官发现我是个新手于是他让我写个连接字符串,虽然当时就知道X种连接字符串的写法,但是当时却没能写对一个,工作多年后我仍然不能写一个正 ...

  2. Codeforces Round #256 (Div. 2) D. Multiplication Table 二分法

     D. Multiplication Table time limit per test 1 second memory limit per test 256 megabytes input st ...

  3. Metatable和Metamethod（转）

    Metatable和Metamethod是用来干啥的?它们可以使得表a和b的表达式“a + b”变得有意义,其中metatable使两个不相关的表a和b之间可以进行操作,而操作的具体行为比如说&quo ...

  4. 华为上机题汇总----java

        以下华为上机题目都是网上整理得到的,代码都是自己调试过的,由于网上java答案较少,欢迎大家批评指正,也希望对准备华为上机的童鞋们有一点点帮助.在练习的过程中成长,加油!~~  第1题:输入字 ...

  5. 同ListView该接口无法通过手势滑动左右切换界面问题解决方法

    同ListView该接口无法通过手势滑动左右切换界面问题解决方法 问题描写叙述: 在做OnGestureListener滑动切换窗体的时候,会遇到这种问题.就是当界面中含有ListView的时候.On ...

  6. springMVC项目异步处理请求的错误Async support must be enabled on a servlet and for all filters involved in async

    从github上down下来一个项目,springMVC-chat.作者全是用的注解,也就是零配置.这可苦了我,经过千辛万苦,终于集成到如今的项目中有一点样子了,结果报出来以下的错误.红色部分.解决方 ...

  7. 初步STL集装箱Vector

    vector 特点: 1.可变长的动态数组 2.使用时包括头文件 #include <vector> 3.支持随机訪问迭代器 • 依据下标随机訪问某个元素时间为常数 • 在尾部加入速度非常 ...

  8. newlisp 接受jenkins带空格的参数

    jenkins有一个参数text种类,它能够以文本的段落拷贝作为参数 newlispThe program receives parameters are separated by spaces, 更 ...

  9. HDU 1596 find the safest road (最短路)

    find the safest road Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. Visual Studio Team Services使用教程--默认团队checkin权限修改