课件_53.第九章：Ajax技术[8]-全局Ajax设置、辅助方法.rar,很常用

ajax02.html

客户端

<!DOCTYPE html>
<!--课件_53.第九章：Ajax技术[8]-全局Ajax设置、辅助方法.rar,很常用-->
<html id="html">
<head>
    <Meta charset="utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <style type="text/css">

    </style>
    <script type="text/javascript">

        $(function(){
//2、Ajax请求全局设置----------------------------------------------------------------------------------
            /*
             $.ajaxSetup({//为后面的Ajax请求作默认的配置！
             timeout:2000
             });
             $('button:eq(0)').click(function(){
             $.ajax('test/return.PHP');
             });
             $('button:eq(1)').click(function(){
             $.ajax('test/return.PHP',{
             timeout:10000
             });
             });
             */

            /*
             $(document).ajaxComplete(function(event,jqXHR,ajaxOptions){//在Ajax请求完成之后执行的函数
             alert(':))');
             console.log(ajaxOptions);
             });
             $(document).ajaxError(function(event,ajaxOptions,thrownError){
             console.log(thrownError);
             });
             $('button:eq(0)').click(function(){
             $.ajax({
             url:'test/return.PHP',dataType:'json'
             });
             });
             $('button:eq(1)').click(function(){
             $.ajax('test/return.PHP',{
             global:false//不触发全局的Ajax请求回调函数
             });
             });
             */
//jQuery提供的Ajax辅助方法,很重要--------------------------------------------------------------------------------------
            //对传入的对象进行url转码以及 转为查询字符串即：序列化！
            //console.log($.param({name:"孙胜利",sex:true,info:"哈哈哈"}));

            //ajax进行表单提交，这是非常重要的
            $('form').submit(function(jqE){
//                console.log($(this).serializeArray());//将表单转换成数据对象！
                var formData=$(this).serialize();//一次性得到表单的所有数据,且对名称和值url编码，序列化，用于Ajax请求发生非常方便！
                $.ajax({
                    url:'return.PHP',type:'post',data:formData

                });
                jqE.preventDefault();//阻止默认行为
            });


        });
    </script>
</head>
<body>
<button>开始0</button>
<button>开始1</button>
<div id="div1">
    div1
</div>
<form style="margin:10px;">
    <div>姓名：<input type="text" name="username" /></div>
    <div>性别：<label><input type="radio" name="sex" value="男" />男</label> <label><input type="radio" name="sex" value="女" />女</label></div>
    <div>运动：<label><input type="checkBox" name="sport[]" value="足球" />足球</label>
        <label><input type="checkBox" name="sport[]" value="篮球" />篮球</label>
        <label><input type="checkBox" name="sport[]" value="乒乓球" />乒乓球</label>
        <label><input type="checkBox" name="sport[]" value="羽毛球" />羽毛球</label>
    </div>
    <div>简介：<textarea name="info"></textarea></div>
    <div><input type="submit" value="提交" /></div>
</form>
</body>
</html>

return.PHP

服务器端

<?PHP
sleep(1);

$html=<<<A
<ul class="ul0">
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
</ul>
<ul class="ul1">
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
    <li>哈哈！</li>
</ul>
A;

$json=<<<A
{"name":"孙胜利"}
A;
//echo $html;
//echo 'hello world';
print_r($_POST);
?>

课件_53.第九章：Ajax技术[8]-全局Ajax设置、辅助方法.rar,很常用

猜你在找的Ajax相关文章