您的位置:首页 > Web前端 > JQuery

jquery ajax post, get, javascript ajax post, get 处理

2013-07-04 04:12 411 查看
ajax 创建 XMLHttp 对象
IE7 以上的版本都支持 XMLHttpRequest
IE7 以下的用 ActiveXObject

async:true, // 当false 时,当执行完这个才继续后面的工作, true 时不等这个完成,就直接继续向后执行 默认为 true,即为异步
方法如下:
var xHRObject = false;
if(window.XMLHttpRequest) // XMLHttpRequest 不能带括号
{
xHRObject = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
}else
{
// 异常,不支持
}

ajax 执行过程为:
0:未初始化,尚末调用 open() 方法
1:启动。已经调用 open() 方法,但尚未调用 send() 方法
2:发送。已经调用 send() 方法,但尚未接收到响应
3:接收。已经接收到部分响应数据
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用
以上执行过程可以用 XHR 对象的 readyStatus 属性来获取相应的代码(0, 1. 2, 3, 4)

xhr.open(method, url, bool);
如:
XHR.open("get", "test.php?v=88", false);
XHR.send(null); // send(string)只是用于 post方式, get方式为 null或或者留空
bool 为了false,所以请求是同步的,js 会等服务器响应之后再继续执行.

当接收到响应后,响应数据会自动填充XHR对象的属性。相关属性如下:
responseText:作为响应主体被返回的文本
responseXML:如果响应的内容类型是 "text/xml"或者 "application/xml",这个属性中将保存包含着响应数据的XML DOM 文档
status: 响应的HTTP状态
statusText: HTTP 状态的说明
onreadystatechange: 返回或设置异步请求的事件处理程序
onreadystatechange 示例:
xhr.open();
xhr.onreadystatechange = getFunc;
xhr.send();

function getFunc()
{
if(xhr.readyState ==1)
{

}else if(xhr.readyState == 2)
{

}else if(xhr.readyState == 3)
{

} .....
}

用 get 方法传递时,IE会产生缓存,所以为了不让其缓存,可以用如下两种方法
1.在 后面加上一个时间的参数,让其一直在更新,如:
xhr.ajax('get', 't.php?t='+Number(new Date)+'&name=lin3615');
2。加入头信息,如:
xhr.get();
xhr.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');

as:

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html charset=utf-8" />
<title>lin3615</title>

</head>
<body>
<h1>测试内容</h1>
<div id="id1">XX</div>
<div id="id2">222<div>
<div id="id3">333</div>
<div id="id4">4444</div>
<a href="javascript:void(0);" onClick="ok();">Onclick</a>
</body>
</html>
<script type="text/javascript">
var xmlhttp;
function ok()
{

if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}else
{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = tt;
xmlhttp.open('get', 'cache.php?id='+Math.random(), true);//异步
xmlhttp.send();
alert("xxxxxxxx");
document.getElementById('id4').innerHTML = xmlhttp.responseText;
}

function tt()
{
if(xmlhttp.readyState== 4 && xmlhttp.status == 200)
{
alert("444444");
}else if(xmlhttp.readyState == 1)
{
alert("111111");
}else if(xmlhttp.readyState == 2)
{
alert("222222");
}else if(xmlhttp.readyState == 3)
{
alert("3333333");
}
}
</script>
//以上为异步传输,即就是没有等 cache.php处理完成,就直接处理后面的程序,所以在 id = id4中的值为空
// 如果是 xmlhttp.open('get', 'cache.php?id='+Math.random(), false);即同步,则必须等 cache.php执行完成才执行后面的程序,此时 id = id4的值为 cache.php中的输出结束
cache.php
echo 'hi,lin3615';
sleep(10);

-----------------------------------------------------------

jquery ajax post

首先引入 jquery,js 文件;

提交的页面(例:index.html)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="./jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#ok").click(function(){
// $.post("处理页面", {"属性名":"属性值", "属性名":"属性值"},
//function(data, status){
// 其中data 为处理页面返回的结果,status 为成功时返回的信息: "success"
// })
var t1 = document.getElementById("txt").value;
var t2 = document.getElementById("uu").value;
$.post("good.php",{'vv':t1,'uu':t2},function(data, status){
$("#myDiv").html(data);
alert(status);
return false; // 防止冒泡
});
return false; // 防止冒泡
});
});

</script>
<body >
<form method="get">
<input type="text" name="vv" id="txt" value="" />
<input type="text" name="uu" id="uu" value="" />
<button id="ok" value="ppp">Button</button>
<div id="myDiv"></div>
</form>
</body>
</html>

good.php文件格式如下:

<?php

print_r($_POST);

// array('vv'=> '', 'uu'=>'')

?>

备注:
"处理的页面",如 process.php 文件,用来接收过来的属性值
属性名:属性值,如 user: 'username'
data:即为处理页面返回返回的数据(即显示)
相当于在 #myDiv 中回显返回的 data 数据

ajax jquery get

首先引入 jquery,js 文件;
提交页面:如 index.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="./jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#ok').click(function(){
var str = document.getElementById("txt").value;

htmlobj = $.ajax({url:"good.php?id="+str, async:false});
$("#myDiv").html(htmlobj.responseText);
return false;
});
return false;
});

</script>
<body >
<form method="get">
<input type="text" name="vv" id="txt" value="" />
<button id="ok" value="ppp">Button</button>
<div id="myDiv"></div>
</form>
</body>
</html>

good.php文件

<?php

print_r($_GET);

?>

备注:
NO.3:表示获取 id = txt 标题里面的内容给变量 str
No.4:表示异步处理,2.php?id=+str, 2.php表示处理的页面,id=+str表示传的 $_GET['id'] = str,回显的数据放在 htmlobj对象中

ajax javascript post

首页页面:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<script language="javascript">
function saveUserInfo(){
//获取接受返回信息层
var msg = document.getElementById("msg");
//获取表单对象和用户信息值
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;

//接收表单的URL地址
var url = "2.php";
//需要POST的值,把每个变量都通过&来联接
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
//实例化Ajax
var ajax = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType) {//设置MiME类别
ajax.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!ajax) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}

//通过Post方式打开连接
ajax.open("POST", url, true);

//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//发送POST数据
ajax.send(postStr);

//获取执行状态
ajax.onreadystatechange = function() {
//如果执行状态成功,那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
}
</script>
<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名:<textarea name="user_name" cols="30" rows="5"></textarea>
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />

<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>

</body>
</html>

提交页面:2.php

print_r($_POST);

ajax javascript get(有个问题就是IE会产生缓存,所以可加相应的参数)

两种方法:

1.加一个时间变量:如 "t.php?t="+[b]new Date()[/b]

2.设置时间信息: xml.setRequestHeader("If-Modified-Since","Wed, 26 Feb 1997 08:21:57 GMT");

原文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>111111</title>
</head>
<script>
function subAjax(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("divText").innerHTML = xmlhttp.responseText;
}
}
var txt = document.getElementById("txt").value;
xmlhttp.open("GET", "good.php?id="+txt, true);
xmlhttp.send(null);
return false;
}
</script>
<body>
<form action="" method="get" name="myform" onSubmit="return subAjax()">
<input type="text" id="txt" name="text" value="" /><br />
<input type="submit" name="submit" value="提交" id="submit" />
<input type="reset" name="reset" id="reset" value="重置" />
</form>
<div id="divText">
111
</div>
</body>
</html>

good.php文件:

<?php
//header("Content-type:text/html; charset=gb2312");
echo $_GET['id'];
?>

jquery post 低级用法

$.ajax({
url:url,
type: 'post',

 async:true, // false 时,当执行完这个才继续后面的工作, true 时不等这个完成,就直接继续向后执行 默认为 true,即为异步 
data:{name: ok, score: 100},
success:function(data){ // data为 url 中返回的数据
alert(data);
}
});

=======

// jquery ajax 之 get 方法, 相当于 e.php?item=$(this).text(),然后 data 就是在 e.php 文件 中输出的数据
/*
$(document).ready(function(){
$('#letter-e a').click(function(){
$.get('e.php', {'term': $(this).text()}, function(data){
$('#dictionary').html(data);
});
return false;
});
});

*/

// jquery ajax 之 post 方法,与 get 一样,只不过是用的是 post 方法而已
/*
$(document).ready(function(){
$('#letter-e a').click(function(){
$.post('e.php', {'term': $(this).text()}, function(data){
$('#dictionary').html(data);
});
return false;
});
});
*/

// 可用 .load() 方法去取代 .post() 方法
/*
$(document).ready(function(){
$('#letter-e a').click(function(){
$('#dictionary').load('e.php', {'item': $(this).text()});
return false;
});
});

*/

// 用 .serialize()
$(document).ready(function(){
$('#letter-f form').submit(function(){
$.get('f.php', $(this).serialize(), function(data){
$('#dictionary').html(data);
});
return false;
});
});

// 关注请求状态 .ajaxStart() 请求开始,还没有传输数据,.ajaxStop(),最后一次活动请求终止
$(document).ready(function(){
$('<div id="loading">loading ...</div>')
.insertBefore('#dictionary')
.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});

/* ajaxComplete() t.php 文件接收为 $_REQUERST['txt']

$(document).ready(function(){
$('#sub').click(function(){
var mytxt = $('#userid').val();
$.get('t.php', {'txt': mytxt}, function(data){
alert(data);
});
$(this).ajaxComplete(function(){
alert("ok");
})
return false;
});
});
*/
// 可以用 .load 来模仿 .ajaxComplete()事件
$(document).ready(function(){
$('#sub').click(function(){
$('.log').load('lin3615.html');
});
});

低级的 ajax

$('#myId').keyup(function(){
$.ajax({
'url': 'seacher.php',
'data': {'search-text': $(this).val()},
'dataType': 'json',
'type': 'get',
'success': function(data)
{
alert(data);
}
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: