问题叙述性说明

我们会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系列(基础)-第二章 限制和排序数据

    更好的看↑代码点击VIEW PLAN 第二章 约束和排序数据 1. 在 emp 表中选择工资介于 1500 到 2500 的员工的信息: 注意:使用 between 下边界 and 上边界时.条件包括 ...

  2. Java NIO 系列教程(转)

    原文中说了最重要的3个概念,Channel 通道Buffer 缓冲区Selector 选择器其中Channel对应以前的流,Buffer不是什么新东西,Selector是因为nio可以使用异步的非堵塞 ...

  3. [Unity3D] 有关公告板实现的误区

    最直接实现一个公告板,我认为我们应该这样做: usingUnityEngine; publicclassBillboard :MonoBehaviour { voidUpdate() { transf ...

  4. Apache Commons Math3学习笔记(2) - 多项式曲线拟合(转)

    多项式曲线拟合:org.apache.commons.math3.fitting.PolynomialCurveFitter类. 用法示例代码: // ... 创建并初始化输入数据: double[] ...

  5. jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

    资源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  6. 【转】ubuntu终端方向键不能用(主机名不显示)问题的解决

    sudo gedit /etc/passwd 在/etc/passwd中修改该用户对应的shell:/bin/sh改为/bin/bash即可解决该问题 来自:http://blog.csdn.net/ ...

  7. 拆除vs发展c++程序开发过程中产生的.ipch和.sdf文件的方法

    正在使用Visual Studio 2010发展C++当程序,你会发现,有创建一些奇怪的文件.一个叫ipch的目录,和一个与project同名的.sdf文件.并且ipch以下的文件和.sdf文件都非常 ...

  8. w3wp占用CPU过高

    w3wp占用CPU过高 在此之前项目有发生过两次类似的状况,都得以解决,但最近又会发现偶尔CPU会跑满,虽然之前使用过WinDbg解决过两次问题但人的记忆是不可靠的,今天处理同样问题的时候还是遇到了一 ...

  9. Java中的逆变与协变(转)

    看下面一段代码 Number num = new Integer(1); ArrayList<Number> list = new ArrayList<Integer>(); ...

  10. 准确率和召回率(precision&amp;recall)

    在机器学习.推荐系统.信息检索.自然语言处理.多媒体视觉等领域,常常会用到准确率(precision).召回率(recall).F-measure.F1-score 来评价算法的准确性. 一.准确率和 ...