问题叙述性说明

我们会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. 怎样设制 select 不可编辑 仅仅读

    1. <select style="width:195px" name="role"  id="role" onfocus=" ...

  2. 【Linux探索之旅】开宗明义+第一部分第一课:什么是Linux?

    内容简介 1.课程大纲 2.第一部分第一课:什么是Linux? 3.第一部分第二课预告:下载Linux,免费的噢!   开宗明义 我们总听到别人说:Linux挺复杂的,是给那些追求逼格的程序员用的.咱 ...

  3. 百度音乐搜索API介绍

    百度音乐搜索API的请求地址如下: [html] view plaincopy http://box.zhangmen.baidu.com/x?op=12&count=1&title= ...

  4. dom4j解析xml中指定元素下内容

    需求:XML为例如以下样式,如今我仅仅想取得timer以下的5000和60000. 解决的方法例如以下: <?xml version="1.0" encoding=" ...

  5. Project_2007关键

    本人今天成功用这个密钥,安装project2007. 分享给着急的小伙伴们. W2JJW-4KYDP-2YMKW-FX36H-QYVD8 版权声明:本文博客原创文章.博客,未经同意,不得转载.

  6. ubuntu nginx安装及相关linux性能參数优化

    一.安装 下载源代码,解压:tar -xzvf nginx-1.4.7.tar.gz ./configure make && make install 改动默认nginx的监听port ...

  7. Binary System

    Description Usually we use number in the decimal system, for it is so convenient for us to remember ...

  8. iOS开发:多线程技术概述

    一.概述 线程(thread):用于指代独立执行的代码段. 进程(process):用于指代一个正在运行的可执行程序,它可以包含多个线程. 任务(task):用于指代抽象的概念,表示需要执行工作. 多 ...

  9. uav 11258 String Partition (DP)

    Problem F - String Partition                                                                         ...

  10. App如何选择移动广告平台,开发者2 - 移动变现模式分析

    开发人员社区的上述分析.它可能无法覆盖全部,但是,每一个开发者都需要根据自己的特点变现模式选择.继App流动性模式做了全面的分析. 游戏.广告.电商是互联网的三种变现模式,移植到移动互联网也相同适用. ...