码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-23 09:20:20      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:php   javascript   ajax   

使用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:;" onclick="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>

index1.php

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

有几点要注意的

1:ajax不能跨域请求数据:当跨域时:如当前脚本域名为:locakhost/index.php,请求的url为127.0.0.1,则发送请求失败,或者服务器能收到请求,但是xmlhttp.status=0,浏览器接受不到服务器返回的数据。

何为跨域?跨域如何发送请求数据,这篇博客有很好的解释。

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0


2:当用for循环发送请求时,因为for循环速度远大于一次请求完成的速度,所以ajax只能收到最后一次请求的数据。

3:有关json,php函数json_encode()和json_decode()都只能接受ut8格式编码的字符串,否者返回null。

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

标签:php   javascript   ajax   

原文地址:http://blog.csdn.net/fantexi1984/article/details/41394627

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!