首页 > 代码库 > 采用ajax提交POST数据的例子
采用ajax提交POST数据的例子
问题描述
我们将一个form中的input和checkbox中的数据异步提交到php服务器,经过处理之后传回。
提交之后显示的位置:
难点分析
采用from表单的onsubmit属性阻止表单的提交
<form action="http://www.baidu.com" onsubmit="return check()">
通过check函数的return false;操作阻止表单的提交,实现不刷新提交数据的目的。
获取复选框选中的选项的值
checkbox标签部分:
<input type="checkbox" name="checkbox" id="multi-choiceA" value=http://www.mamicode.com/"A">选项A
>
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=http://www.mamicode.com/"A">选项A
>
后台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数据的例子
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。