问题叙述性说明

我们会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. effective c++ 条款9 do not call virtual function in constructor or deconstructor

    在构造函数中不要调用virtual函数,调用了也不会有预期的效果. 举个例子 class Transaction { public: Transaction() { log(); } ; } clas ...

  2. MVC模式编程演示样本-登录认证（静态）

    好,部分博客分享我的总结JSP-Servlet-JavaBean思想认识和三层编程模型的基本流程,ZH- CNMVC该示例实现演示的编程模式-登录身份验证过程,在这里,我仍在使用静态验证usernam ...

  3. 【干货】免费获得WebStorm软件

    内容提要: 1.WebStorm简介 2.如何免费获得WebStorm 3.利用学生身份免费获得正式版WebStorm WebStorm简介 WebStorm 是一款前端开发 IDE(集成开发环境), ...

  4. Oracle Applications Multiple Organizations Access Control for Custom Code

    档 ID 420787.1 White Paper Oracle Applications Multiple Organizations Access Control for Custom Code ...

  5. 编写ruby扩展库

    # Loads mkmf which is used to make makefiles for Ruby extensions require 'mkmf' # Give it a name ext ...

  6. 初学者cocos2dx 写2048 为了和大家一起分享

    第一个是在头文件 部分的代码是学习不变  大多数写自己. class HelloWorld : public cocos2d::CCLayer { public: virtual bool init( ...

  7. RH253读书笔记(1)-Lab 1 System Monitoring

    Lab 1 System Monitoring Goal: To build skills to better assess system resources, performance and sec ...

  8. 大约Java有点感悟---开发商根本上感悟学习

    这些年来一直从事大C.C++,有些局部底.一直想知道更多关于顶级什么. 所以,在工作之余.阅读更多Java哪些方面,还使用了一些建筑结构的一些简单的程序,在这里我想简单谈谈自己的一点感悟. 1.Jav ...

  9. 教你使用vim表白

    99669999996669999996699666699666999966699666699 99699999999699999999699666699669966996699666699 9966 ...

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