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

Sian · 发表于 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);

帐号		自动登录	找回密码
密码			立即注册

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

相关帖子