问题叙述性说明

我们会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. 每天努力一点之SQL（二） count sum case when then group by

    1. select sum(CASE WHEN A.[STATUS]=0 THEN 1 ELSE 0 end) as a1,  sum(CASE A.[STATUS] WHEN 1 THEN 1 EL ...

  2. Principle使用教程

    本次分享主要有以下几点内容: 1.初识界面2.两个关键操作3.案例一:滑动4.案例二:点击跳转 5.案例三:跟随动画(抽屉效果) 1初识界面Principle的界面与Sketch基本一致,如下图: a ...

  3. 集差集 哈希表 比较数据库的照片和server画面上，将server垃圾上的图片删除

    SSH 骨架code: public String deleRubbishAd(){ int deleADcount = 0; rubbishADtp = configDao.rubbishADtp( ...

  4. javascript中的“向量”

    什么是向量 向量通常指一个有长度有方向的量.向量使所有的移动和空间行为更容易理解和在代码中实现.向量可以相加,缩放,旋转,指向某物体. 在javascript中,一个方向和长度(即向量)在二维空间中可 ...

  5. 迅雷云加速开放平台c#demo

    迅雷云加速开放平台c#demo.很多人很遇到下载文件的问题.这个例子是调用迅雷云加速开放平台的dll,进行下载,速度很快,下载过程中可以获取到很全的下载信息,比如下载速度,进度,完成状态等. 例子中带 ...

  6. Oracle之Check约束实例具体解释

    Oracle | PL/SQL Check约束使用方法具体解释 1. 目标 实例解说在Oracle中怎样使用CHECK约束(创建.启用.禁用和删除) 2. 什么是Check约束? CHECK约束指在表 ...

  7. Ant—Ant标签解释

            采用ant命令必须写ant命令脚本,脚本由非常多Ant标签组成.现在总结一下我也遇到过Ant标签: 版权声明:本文博主原创文章,博客,未经同意不得转载.

  8. shuffle一个简单的过程叙述性说明

    shuffle它是在map和reduce过程之间.我们看看在这个过程中的步骤,了解在这个问题上不深,有可能是一个错误.忘记修正 1. map map出口key,value,里的context.writ ...

  9. WP8关于对地图开发的改进

    原文:WP8关于对地图开发的改进 微软在2012年6月21日 发布了 Windows Phone 8的更新.带来大量的功能更新和全新的SDK.作为重头戏的部分是引入了 C++ 和 DirectX,支持 ...

  10. Codeforces Round #261 (Div. 2) E. Pashmak and Graph DP

    http://codeforces.com/contest/459/problem/E 不明确的是我的代码为啥AC不了,我的是记录we[i]以i为结尾的点的最大权值得边,然后wa在第35  36组数据 ...