index.html
<html>
<head>
<meta charset="utf-8">
<title>jQuery Ajax 实例演示</title>
</head>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//这个就是jQueryready ,它就像C语言的main 所有操作包含在它里面
$("#button_login").mousedown(function(){
login(); //点击ID为"button_login"的按钮后触发函数 login();
});
function login(){ //函数 login();
var username = $("#username").val();//取框中的用户名
var password = $("#password").val();//取框中的密码
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "login.php", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'username='+username+'&password='+password, //发给php的数据有两项,分别是上面传来的u和p
success: function(json){//如果调用php成功
//alert(json.username+'\n'+json.password); //把php中的返回值(json.username)给 alert出来
$('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置
}
});
}
//$.post()方式:
$('#test_post').mousedown(function (){
$.post(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function (data) //回传函数
{
var myjson='';
eval_r('myjson=' + data + ';');
$('#result').html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
}
);
});
//$.get()方式:
$('#test_get').mousedown(function (){
$.get(
'login.php',
{
username:$('#username').val(),
password:$('#password').val()
},
function(data) //回传函数
{
var myjson='';
eval_r("myjson=" + data + ";");
$('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
}
);
});
});
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>
<button id="test_post">post提交</button>
<button id="test_get">get提交</button>
</body>
</html>
login.php
<?php
echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']));
?>
代码解释:
login.php :
a. json_encode :http://php.net/manual/en/function.json-encode.php 不复制过来了,几个例子都很好。
index.html:
a.$.ajax() : http://www.w3school.com.cn/jquery/ajax_ajax.asp
b.$.ajax() -> data: 两种办法:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston", //第一种方式传参
// data: {name:"John",location:"Boston"} //第二种方式传参
// data: {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
/*
第一种我们用url传参,参数里面如果加带"&"这个符号的话,可能参数接收不到或不完整,
如“ data: "name=John&location=Boston",” 如果name的值是"john&smith"这样写可能就会有问题,
我们可以用JS里面的encodeURIComponent()方法进行转义,
但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义*/
另一篇
1. /**
2. * 订单取消
3. * @return {Boolean} 处理是否成功
4. */
5. function orderCancel(orderId, commant){
6. var flag = false;
7. $.ajax({
8. "POST",
9. "../order/orderCancel.action", //orderModifyStatus
10. "orderId":orderId,"commant":commant},
11. "json",
12. false,
13. false,
14. function(data){
15. var member = eval("("+data+")"); //包数据解析为json 格式
16. if(member.success=="true"){
17. true;
18. else if(member.success=="false") {
19. alert(member.info);
20. }
21. },
22. function(json){
23. "订单取消异常,请刷新后重试...");
24. }
25. });
26. hidediv();
27. return flag;
28. }
c.$.ajax() -> success :
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
关于json.password 的这个点
最近在用jquery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行。查了些资料,解释如下:
[javascript] view plain copy
$.ajax({
url: ajaxurl,
type: "POST",
success: function(data){
//假设返回的json数据里有status及info2个属性
//有时候可以直接ajaxobj.status或者ajaxobj["status"]去访问
//但有时候,却要通过eval()或者 $.parsejson();才可以通过ajaxobj.status访问,而且这种情况下,需要是complete而不是success
ajaxobj=eval("("+data+")");
//或者$.parsejson()
//var ajaxobj = $.parsejson(data);
if(ajaxobj.status=="0")
{
alert("请登陆.");
}
else if(ajaxobj.status=="1")//未绑定微博
{
alert(ajaxobj.info);
}
return true;
},
error:function(ajaxobj)
{
if(ajaxobj.responseText!='')
alert(ajaxobj.responseText);
}
});
先说明第一种情况:
能够直接 data.属性名访问的情况,服务器端代码一定是直接return的一个常量字符串。
什么是常量字符串呢,常量字符串就是指直接用“”组成的字符串,没有定义String 变量直接把一串“”print到前台的情况,就可以直接data.属性名访问,而且jquery端只要写success就可以拿到。
下面是造成要eval并且不能进入success的原因:
这种情况是因为服务器端向外print的时候是一个String对象,通常此类问题在我的代码里是因为后台json比较复杂,在组织的时候我用到了StringBuffer,然后最后print的时候print的是StringBuffer对象的toString,所以就相当于print了一个String对象
这种情况下jquery的ajax方法就不会进入success方法,只能用complete接收,并且想要解析data里的json数据的话,必须对data.responseText进行eval()或者 $.parsejson();
除此两点,还有需要注意的是,如果你使用的是jq1.4,那么他对json的格式有着更严格的要求,所有的key和属性都要用双引号标注起来,虽然key不用双引号原生的js是允许的,但是jq1.4似乎有这个要求。
以上是我个人的想法跟理解,若有不同见解欢迎指教.
php 接受 json
代码如下:
<?php
$json_string = $_POST["txt_json"];
if(ini_get("magic_quotes_gpc")=="1")
{
$json_string=stripslashes($json_string);
}
$user = json_decode($json_string);
echo var_dump($user);
?>
在这个文件中,首先得到html文件中POST表单域txt_json的值,放入变量$json_string中,而后判断,如果当前PHP的设定为magic_quotes_gpc=On,即传入的双引号等会被转义,这样json_decode函数无法解析,因此我们要将其反转义化。而后,使用json_decode函数将JSON文本转换为对象,保存在$user变量中,最终用echo var_dump($user);,将该对象dump输出出来
到此处,已经会了基本的 html 利用 ajax和 form同 php 联络 php和数据库联络,下面准备做一个登陆界面,密码帐号存入数据库,界面利用amuizui的模板。