电脑安全

您当前的位置:主页 > 电脑安全 >

jquery与 ajax 简单例子-网络编程

来源:[db:来源]标题:   剪贴板    编辑:电脑技术全能网 时间:2019-09-19 12:34

原标题:jquery与 ajax 简单例子-网络编程
   jquery与 ajax 简略例子基于JQuery框架的AJAXPS:自己这篇始发于PHPCHINA,发觉被许多人转了,但却未说明出处,想了一下,仍是本人转到这里来。前几天发了个贴,分享了prototype框架对于AJAX方面的进修进程。而后有人说jquery框架更便利。恰好名目中预备应用thickbox,因而罗唆摈弃prototype.js,看起jquery.js了。JQuery确切不错,体积比Prototype小了很多,并且应用起来更便利更机动。有人说Prototype像JAVA,正统;而JQuery像Ruby,机动,更趋于OOP。小试了下AJAX,感到比prototype简练多了,在JQuery中,AJAX有三种完成方法:$.ajax(),$.post,$.get()。XHTML(重要):代码: 复制内容到剪贴板<div id="result" style="backgroundrange;border:1px solid red;width:300px;height:400px;"></div><form id="formtest" action="" method="post"><p><span>输出姓名:</span><input type="text" name="username" id="input1" /></p><p><span>输出年纪:</span><input type="text" name="age" id="input2" /></p><p><span>输出性别:</span><input type="text" name="sex" id="input3" /></p><p><span>输出任务:</span><input type="text" name="job" id="input4" /></p></form><button id="send_ajax">提交</button><button id="test_post">OST提交</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+""; str+="年纪:"+json.age+""; str+="性别:"+json.sex+""; 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+"任务:"+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;?>