使用原生ajax发送post请求完整案例

升平网络工作室 · 发表于 2020-6-5 11:52:19

使用ajax发送数据实现前后台的交互，我想是web开发最基础的技能了。近来dz开发因为不兼容jquery，所以只能使用原生js发送数据，不想还遇到很多问题。在这里分析总结一下。先来一个使用ajax发送post表单数据的案例。

<html>
<head>
<title>
ajax发送post请求实例
</title>
</head>
<body>
<form method="post" action="index.php" name="userinfo">
姓名:<input type="text" name="username" />
学校:<input type="text" name="school"/>
个人简介:<textarea name="selfinfo"></textarea>
<a href="javascript:;" οnclick="ajaxpost()">提交</a>
</form>
<script type="text/javascript">
function ajaxpost(){
var f = document.userinfo;
var uname = f.username.value;
var uschool = f.school.value;
var uinfo = f.selfinfo.value;
var xmlhttp
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var obj = eval('('+xmlhttp.responseText+')');
alert('姓名:'+obj.uname+'学校:'+obj.uschool+'个人简介:'+obj.uinfo);
}
}
xmlhttp.open("post","index1.php",true);
/*
发送post请求时此句万万不能少
在Form元素的语法中，EncType表明提交数据的格式
用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。
application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符
*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('uname='+uname+'&uschool='+uschool+'&uinfo='+uinfo);
}
</script>
</body>
</html>

复制代码

<?php
//index1.php
if(!empty($_POST)){
echo json_encode($_POST);
}

复制代码

升平网络工作室 · 发表于 2020-6-5 11:56:20

index.html
<script type="text/javascript">
document.write('<div id="result">百度收录</div>');
setTimeout("ajaxpost()",2000);//2秒后自动查收录ajaxpost();
function ajaxpost(){
var api = "push";
var url = window.location.href;
var xmlhttp
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var obj = eval('('+xmlhttp.responseText+')');
alert('code:'+obj.code+'message:'+obj.message);
document.getElementById('result').innerHTML=obj.message;
}
}
xmlhttp.open("post","baidu.api.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send('api='+api+'&url='+url);
}
</script>

复制代码

<?php
//baidu.api.php
$api = $_REQUEST["api"];
$url = $_REQUEST["url"];
$return = array('state'=>'ok','code'=>1,'message'=>'','version'=>'1.0','system'=>urlencode('升平推送百度接口'),'updatetime'=>urlencode('2020年6月2日'));
//如果未传入有效参数
if (!isset($api)) {
$return['code']=0;
$return['message']=$url;
exit(urldecode(json_encode($return)));
}
//如果未传入有效参数
if (isset($url)) {
$return['code']=1;
$return['message']=$url;
exit(urldecode(json_encode($return)));
}

复制代码

帐号		自动登录	找回密码
密码			加入论坛

使用原生ajax发送post请求完整案例

浏览过的版块

浏览排行

最新发表

-- 友情链接 --

使用原生ajax发送post请求完整案例

浏览过的版块

浏览排行

最新发表

-- 友 情 链 接 --

-- 友情链接 --