采纳ajax提交POST样本数据
问题叙述性说明
我们会form该input和checkbox提交给异步数据phpserver。处理后的回。
提交之后显示的位置：
难点分析
採用from表单的onsubmit属性阻止表单的提交
<form action="http://www.baidu.com" onsubmit="return check()">
通过check函数的return false;操作阻止表单的提交，实现不刷新提交数据的目的。
获取复选框选中的选项的值
<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/>
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;
}
};
完整代码
<!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样本数据的更多相关文章
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
- Ajax 提交KindEditor的数据
这次我是在EasyUI中使用了KindEditor的编辑器,按照官方给的代码,总是无法获取编辑器里面的值(内容),如下: KindEditor.ready(function (K) { ...
- jquery实现ajax提交表单信息
最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- 【ajax 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...
- Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）
最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- 验证控件,解决用于ajax提交前的验证，不是submit提交的验证
//解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
随机推荐
- Java引用类型变量
Java引用类型变量 1.编译时类型:由声明该变量时使用的类型决定 2.执行时类型:由实际赋给该变量的对象决定 类型不一致的假设编译时类型和执行,可能会出现多态性 版权声明:本文博主原创文章.博 ...
- 在WPF中处理Windows消息
在Winform中 处理Windows消息通过重写WndProc方法 在WPF中 使用的是System.Windows. Sytem.Windows.Controls等名字空间,没有WndProc函数 ...
- Chrome 小工具: 启动本地应用 (Native messaging)
最近遇到一个新的问题.需要使用Chrome 插件, 从我们对我们当地的一个网站之一启动C#应用,同时通过本申请值执行不同的操作. 在这里记录下解决的过程.以便以后查找 首先我们须要新建一个google ...
- Android菜鸟的成长笔记（17）—— 再看Android中的Unbounded Service
原文:Android菜鸟的成长笔记(17)-- 再看Android中的Unbounded Service 前面已经写过关于startService(Unbounded Service)的一篇文章:&l ...
- 几款开源ESB总线的比较（转）
现有的开源ESB总线中,自从2003年第一个开源总线Mule出现后,现在已经是百花争鸣的景象了.现在我就对现有的各种开源ESB总线依据性能.可扩展性.资料文档完整程度以及整合难易程度等方面展开. CX ...
- 站点系统压力測试Jmeter+Badboy
近期项目须要压力測试,因此搜了几款试用,首选的是LoadRunner这款大名鼎鼎的測试软件: LoadRunner11 下载请猛戳这里 传送门LoadRunner破解文件 下载请猛戳这里 传送门Loa ...
- cocospods 卡在 Analyzing dependencies
參考链接:http://www.cocoachina.com/bbs/read.php? tid=193398 关于pod stetup的详解在这里.对于初次使用CocoaPods的同学,即使你不使用 ...
- Web APi之认证
Web APi之认证(Authentication)两种实现方式后续[三](十五) 前言 之前一直在找工作中,过程也是令人着实的心塞,最后还是稳定了下来,博客也停止更新快一个月了,学如逆水行舟,不 ...
- Serializable Clonable
序列化机制有一种很有趣的用法:可以方便的克隆对象,只要对应的类是可序列化的即可.操作流程:直接将对象序列化到输出流中,然后将其读回.这样产生的新对象是对现有对象的一个深拷贝(deep copy).在此 ...
- Binary Tree Inorder Traversal(转)
Given a binary tree, return the inorder traversal of its nodes' values. For example: Given binary tr ...