jquery 框架使用教程 AJAX篇

兖州司令员

兖州司令员

2016-02-19 14:42

有了下面这个jquery 框架使用教程 AJAX篇教程,不懂jquery 框架使用教程 AJAX篇的也能装懂了,赶紧get起来装逼一下吧!
小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get()。
XHTML(主要):
div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"/div
form id="formtest" action="" method="post"
pspan输入姓名:/spaninput type="text" name="username" id="input1" //p
pspan输入年龄:/spaninput type="text" name="age" id="input2" //p
pspan输入性别:/spaninput type="text" name="sex" id="input3" //p
pspan输入工作:/spaninput type="text" name="job" id="input4" //p
/form
button id="send_ajax"提交/button
button id="test_post"POST提交/button
button id="test_get"GET提交/button
JS:
1、引入jquery框架:
script type="text/javascript" src="../js/jquery.js"/script
2、构建AJAX,JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了,可以直接封装在JS文件中:
script type="text/javascript"
//$.ajax()方式
$(document).ready(function (){
$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,而不需要混在XHTML中了
var params=$('input').serialize(); //序列化表单的值,与prototype中的form.serialize()相同
$.ajax({
url :'ajax_test.php', //后台处理程序
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
});
function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseText
var str="姓名:"+json.username+"br /";
str+="年龄:"+json.age+"br /";
str+="性别:"+json.sex+"br /";
str+="工作:"+json.job;
$("#result").html(str);
}
//$.post()方式:
$(function (){ //$(document).ready(function (){ 的简写
$('#test_post').click(function (){
$.post('ajax_test.php',
{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
function (data){ //回传函数
var myjson='';
eval('myjson='+data+';');
$('#result').html("姓名:"+myjson.username+"br /工作:"+myjson['job']);
});
});
});
//$.get()方式:
$(function (){
$('#test_get').click(function (){
$.get('ajax_test.php',
{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},
function (data) {
var myjson='';
eval("myjson="+data+";");
$("#result").html(myjson.job);
});
});
});
/script
PHP代码:
?php
$arr=$_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$myjson=json_encode($arr);
echo $myjson;
展开更多 50%)
分享

猜你喜欢

jquery 框架使用教程 AJAX篇

Web开发
jquery 框架使用教程 AJAX篇

基于JQuery框架的AJAX实例代码

Web开发
基于JQuery框架的AJAX实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使用 jQuery 简化 Ajax 开发

Web开发
使用 jQuery 简化 Ajax 开发

使用jQuery简化Ajax开发

Web开发
使用jQuery简化Ajax开发

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ajax框架之xajax的使用

Web开发
ajax框架之xajax的使用

ajax框架之jqpie的使用

Web开发
ajax框架之jqpie的使用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

保护MySQL数据库中重要数据全攻略

保护MySQL数据库中重要数据全攻略

windows 7系统用户有密码怎么样才能自动登录

windows 7系统用户有密码怎么样才能自动登录
下拉加载更多内容 ↓