采纳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();就行了,下面我来介绍两个提交表单数据的方法. ...
随机推荐
- 怎样设制 select 不可编辑 仅仅读
1. <select style="width:195px" name="role" id="role" onfocus=" ...
- 【Linux探索之旅】开宗明义+第一部分第一课:什么是Linux?
内容简介 1.课程大纲 2.第一部分第一课:什么是Linux? 3.第一部分第二课预告:下载Linux,免费的噢! 开宗明义 我们总听到别人说:Linux挺复杂的,是给那些追求逼格的程序员用的.咱 ...
- 百度音乐搜索API介绍
百度音乐搜索API的请求地址如下: [html] view plaincopy http://box.zhangmen.baidu.com/x?op=12&count=1&title= ...
- dom4j解析xml中指定元素下内容
需求:XML为例如以下样式,如今我仅仅想取得timer以下的5000和60000. 解决的方法例如以下: <?xml version="1.0" encoding=" ...
- Project_2007关键
本人今天成功用这个密钥,安装project2007. 分享给着急的小伙伴们. W2JJW-4KYDP-2YMKW-FX36H-QYVD8 版权声明:本文博客原创文章.博客,未经同意,不得转载.
- ubuntu nginx安装及相关linux性能參数优化
一.安装 下载源代码,解压:tar -xzvf nginx-1.4.7.tar.gz ./configure make && make install 改动默认nginx的监听port ...
- Binary System
Description Usually we use number in the decimal system, for it is so convenient for us to remember ...
- iOS开发:多线程技术概述
一.概述 线程(thread):用于指代独立执行的代码段. 进程(process):用于指代一个正在运行的可执行程序,它可以包含多个线程. 任务(task):用于指代抽象的概念,表示需要执行工作. 多 ...
- uav 11258 String Partition (DP)
Problem F - String Partition ...
- App如何选择移动广告平台,开发者2 - 移动变现模式分析
开发人员社区的上述分析.它可能无法覆盖全部,但是,每一个开发者都需要根据自己的特点变现模式选择.继App流动性模式做了全面的分析. 游戏.广告.电商是互联网的三种变现模式,移植到移动互联网也相同适用. ...