JQuery AJAX Demo

APP发展集团：347072638（HTML5,APP）

1.先看一个JQuery AJAX Demo

HTML端：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

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

        $(document).ready(function () {

            jQuery.support.cors = true;

            $('#JQuery_AJAX_Test').click(function () {

              $.ajax({

                     type: "POST",

                     url: "http://version.messageloop.net/index.php",

                     data: "{ version: 1}",

                     dataType: "json",

                     success: function(data, textStatus, jqXHR){

                        alert("code:"+data.code+"\nresult:"+data.message+"\ntextStatus:"+textStatus+"\njqXHR:"+jqXHR);

                     }

                     });

            });

        });

    </script>

</head>

<body>

    <a href="#" id="JQuery_AJAX_Test">JQuery AJAX Test</a><br/>

    <div id="result"></div>

</body>

</html>

PHP服务端：

<span style="font-size:12px;"><?

php

$output = array();

$deviceType = @$_GET['deviceType'] ? $_GET['deviceType'] : '';

$version = @$_GET['version'] ?

$_GET['version'] : 0;

header('Access-Control-Allow-Origin: *'); //注：这个地方非常重要。<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">因为浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略。请求无法从不同的域、子域或协议成功地取回数据。</span>

define('ROOT', dirname(__FILE__));

$file = ROOT . '/open_device_config';

$content = file_get_contents($file);

//deviceType must equal 'android' and version 大于配制文件版本才提示OK!

if ($deviceType == 'android' && $version <= $content){

	$output = array('code'=>201, 'message'=>'This version can not use, you must up grade!');

    	exit(json_encode($output));

}else{

    $output = array('code'=>200, 'message'=>'This version is OK!');

    exit(json_encode($output));

}

?></span>

效果：

2.什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX就是与server做数据交换的，能够对网页实现局部更新。

3.什么是JQuery AJAX?

JQuery对AJAX进行了一层封装。

通过 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 从远程server上请求文本、HTML、XML 或 JSON - 同一时候您可以把这些外部数据直接加载网页的被选元素中。

4.怎样使用JQuery AJAX?

语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
參数 描写叙述
url 必需。

规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到server的数据。
success(data, textStatus, jqXHR) 可选。请求成功时运行的回调函数。
dataType

可选。规定预期的server响应的数据类型。

默认运行智能推断（xml、json、script 或 html）。

具体说明

该函数是简写的 Ajax 函数，等价于：

$.ajax({

  type: 'POST',

  url: url,

  data: data,

  success: success,

  dataType: dataType

});

5.注意事项

因为浏览器安全方面的限制。大多数 "Ajax" 请求遵守同源策略。请求无法从不同的域、子域或协议成功地取回数据。假设在不同域下訪问就会出现提示：

No 'Access-Control-Allow-Origin' header is present
on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.

因此解决方法：

1.採用同域策略，在同一域名下。

2.在服务端设置属性，如：php服务端，header('Access-Control-Allow-Origin: *');


APP开发群：347072638（HTML5,APP）

版权声明：本文博客原创文章。博客，未经同意，不得转载。

JQuery AJAX Demo的更多相关文章

  1. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  2. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  3. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

  4. Jquery Ajax调用aspx页面方法 (转载)

    在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...

  5. jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action1.ActionResult Test1    2.View  Test1.aspx3.ajax page4.MetaObjec ...

  6. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  7. [转载]jquery ajax/post/get 传参数给 mvc的action

    jquery ajax/post/get 传参数给 mvc的action 1.ActionResult Test1     2.View  Test1.aspx 3.ajax page 4.MetaO ...

  8. jquery Ajax应用总结

    常见应用: 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET&quo ...

  9. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

随机推荐

  1. SQL Server 2008 还原数据库

    1.得到数据库备份文件,怎么得到的,[能够看这里]~ 2.把备份文件加个.bak 的后缀,比如: 3.打开SQL , 你能够新建一个空数据库 , 或者利用原有的数据库 , 点击右键>>任务 ...

  2. Android图片异步加载的方法

    很多时候,我们在加载大图片或者需要处理较多图像数据的时候,希望显示效果能好点,不至于因为图片解码耗时产生ANR等情况,不得不说异步加载是个不错的方法.说到异步加载,避免application出现ANR ...

  3. android Graphics（二）：路径及文字

    前言:今天项目进入攻关期,他们改Bug要改疯掉了,主管为了激励大家,给大家发了一封邮件,讲到他对项目和学习的理解,一个很好的图形模型,分享给大家,如图在下面给出:(不便给出原文,我仅做转述)无论是学习 ...

  4. 【IE】浏览器模式与文档模式 及其开发中处理方式

    原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...

  5. tomcat环境变量的配置（网上摘，全部验证通过）

    tomcat环境变量的配置   1.===> 进入bin目录下,双击startup.bat看是否报错.一般肯定会报. 2.===> 右键我的电脑===>高级===>环境变量   ...

  6. XML IList<T> TO DataSet TO DataTable 相互转换

    //遍历XML 获得 DataSet //XmlTextReader static void Main(string[] args) { string xmlData = @"D:\stud ...

  7. tabbar动画切换

    效果1: UIViewController *vc = self.viewControllers[self.selectedIndex]; CATransition *animation =[CATr ...

  8. 省份、城市、区县三级联动Html代码

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  9. mul16

    设计思想:乘法运算本身就可以看做是一个移位相加的过程               1 1 0 1 0     = 26*              1 0 1 1 1    = 23          ...

  10. 什么是TimeTunnel

    index - Taocode 欢迎使用TimeTunnel PageOutline(1-3,,inline) 什么是TimeTunnel !TimeTunnel(简称TT)是一个基于thrift通讯 ...