年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1850|回复: 0

[jQuery] 19、jQuery中Ajax基本网络请求使用示例

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-21 15:59:40 | 显示全部楼层 |阅读模式
    1、index.html
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html>
    <head>
    	<title>jQuery Ajax</title>
    	<meta charset="utf-8"/>
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <style type="text/css">
    	    *{
    		    margin: 10px auto;
    		    padding: 0;
    		    text-align: center;
    		    font-size: 18px;
    	    }
    	    
    	    #submit{
    		    display: block;
    		    width: 60px;
    		    margin: 20px auto;
    	    }
        </style>
        <script>
    	    $(document).ready(function(){
    		    $(':submit').click(function(event){
    			    var str = $('form').serialize();
    			    // return false实际执行
    			    // 1、event.preventDefaule()
    			    // 2、event.stopPropagation()
    			    // 3、终止函数执行并返回
    			    event.preventDefault();
    			/*
    			    // 提交地址、提交数据、回调函数、获取类型
    			    $.get('submit.php', str, function(data){
    				    var objArray = data;
    				    console.log(data[0].title);
    			    }, 'json');
    			    $.post('submit.php', str, function(data){
    				    var objArray = data;
    				    console.log(data[0].title);
    			    }, 'json');
    			 */   
    			    $.ajax({
    				    url:"submit.php", type:"post", data:str, dataType:"text",
    				    beforeSend:function(XMLHttpRequest){
    					    console.log('beforeSend:'+XMLHttpRequest);
    				    },
    				    error:function(XMLHttpRequest, textStatus, errorThrown){
    					    console.log('error:'+XMLHttpRequest+textStatus+errorThrown);
    				    },
    				    success:function(data, textStatus){
    					    console.log('success:'+data);
    				    },
    				    complete:function(XMLHttpRequest, textStatus){
    					    console.log('complete:'+XMLHttpRequest+textStatus);
    				    }
    			    });
    		    });
    	    });
        </script>
    </head>
    <body>
    	<form action="submit.php" method="POST">
    		<span>品牌:</span>
    		<input id="apple" type="checkbox" name="brand[]" value="apple" />Apple
    		<input id="samsung" type="checkbox" name="brand[]" value="samsung" />Samsung
    		<input id="google" type="checkbox" name="brand[]" value="google" />Google
    		<input id="submit" type="submit" value="提交" />
    	</form>
    </body>
    </html>
    2、submit.php
    [PHP] 纯文本查看 复制代码
    <?php
    	header("Content-Type:text/html;charset=utf-8");
    	$appleArray = array(
    		array(
    			'title'=>'iPhone 4S', 
    			'brand'=>'苹果', 
    			'price'=>'1488', 
    			'location'=>'中国大陆'),
    		array(
    			'title'=>'iPhone 5', 
    			'brand'=>'苹果', 
    			'price'=>'2488', 
    			'location'=>'中国大陆')
    	);
    	$samsungArray = array(
    		array(
    			'title'=>'Galaxy S3', 
    			'brand'=>'三星', 
    			'price'=>'1488', 
    			'location'=>'韩国'),
    		array(
    			'title'=>'Galaxy Note II', 
    			'brand'=>'三星', 
    			'price'=>'3488', 
    			'location'=>'韩国')
    	);
    	$googleArray = array(
    		array(
    			'title'=>'Nexus', 
    			'brand'=>'谷歌', 
    			'price'=>'2500', 
    			'location'=>'韩国')
    	);
    	
    	// 获取用户选项,如果没有选项提示重新选择
    	$global = array_merge($_GET, $_POST);	// 兼容GET与POST方法
    	$brandChecked = isset($global['brand']&#65532;)?$global['brand']:exit('请选择选项');
    	// 遍历数组拼接集合
    	foreach($brandChecked as $item){
    		$realBrand[] = ${$item.'Array'};
    	}
    	// 根据用户选项合并相应数据
    	$newArray = call_user_func_array('array_merge', $realBrand);
    	echo json_encode($newArray);
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 23:21 , Processed in 0.056877 second(s), 22 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表