以下是全部代码:
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript"
<script language="
$(document).ready(function ()
{
$('#send_ajax').click(function (){
var params=$('input').serialize(); //序列化表单的值
$.ajax({
ckeditor/"
type:'post', //数据发送方式
dataType:'json', //接受数据格式 data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
//$.post()方式:
$('#test_post').click(function (){
$.post(
'ajax_json.php',
{
username:$('#input1').val(),
age:$('#input2').val(),
sex:$('#input3').val(),
job:$('#input4').val()
},
function (data) //回传函数
{
var myjson='';
eval('myjson=' + data + ';');
$('#result').
}
);
});
//$.get()方式:
$('#test_get').click(function ()
{
$.get(
'ajax_json.php',
{
username:$("#input1").val(),
age:$("#input2").val(),
sex:$("#input3").val(),
job:$("#input4").val()
},
function(data) //回传函数
{
var myjson='';
eval("myjson=" +
$("#result").html(myjson.job);
}
);
});
});
function update_page (json) //回传函数实体,参数为XMLhttpRequest.responseText
{
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>
<div ></div>
<form >
<p><span>输入姓名:</span><input type="text" name="username" /></p>
<p><span>输入年龄:</span><input type="text" name="age" /></p>
<p><span>输入性别:</span><input type="text" name="sex" /></p>
<p><
</form>
<button >提交</button>
<button >POST提交</button>
<button >GET提交</button>
</body>
</html>
PHP 文件 ajax_json.php:
<?php
//$arr = $_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = '测试字符串';
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;
function my_json_encode($phparr)
{
if(function_exists("json_encode"))
{
return json_encode($phparr);
}
else
{
require_once 'json/json.class.php';
$json = new Services_JSON;
return $json->encode($phparr);
}
}
?>
以上是原文:挺好的,以下是本人根据实际应用的一个例子。
只是用到了$.get();这段,用于在信息列表中点击更改文章状态(审核,推荐之类的)的操作。
//$.get()方式: $('.test_get').click(function (){ var data_id = $(this).attr("data-id"); var id = $(this).attr("id"); var typename = $(this).attr("name"); var data_value_id = $(this).attr("data-value"); if(data_value_id==1){ var data_id_local = 0; var data_check = '否 <i class="icon-remove"></i>'; }else{ var data_id_local = 1; var data_check = '是 <i class="icon-ok"></i>'; } $('#'+id).attr("data-value",data_id_local); $('#'+id).html(data_check); $.get( 'ajax_json.php',//这人文件可以接收到以下三个参数,可以写多个,最后一个不要带“,”;$_GET['data_id'] { data_id:data_id, data_value_id:data_value_id, typename:typename
}, function(data) //回传函数 { //这块没做返回值 处理,感觉有点慢,在上边直接处理啦, } ); });
以下是html代码:
<tr class="gradeX"> <td>66</td> <td data-value="1" data->删除</a> </td> </tr>
|
请发表评论