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. 羊和汽车问题（或s三门问题（Monty Hall problem）亦称为蒙提霍尔问题）

    三门问题(Monty Hall problem)亦称为蒙提霍尔问题.蒙特霍问题或蒙提霍尔悖论,大致出自美国的电视游戏节目Let's Make a Deal.问题名字来自该节目的主持人蒙提·霍尔(Mon ...

  2. Vijos 1100 加分二叉树

    题目 1100 加分二叉树 2003年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB   题目描述 Description 设一个n个节点的二叉树tree的中序遍历为( ...

  3. 戴尔CEO：我们将专注于企业 而非手机业务

    9月13日消息,据国外媒体报道,戴尔公司董事长兼首席执行官迈克尔·戴尔(Michael Dell)周五接受了CNBC采访,谈了他对戴尔未来的打算.此前一天,迈克尔·戴尔提出的以250亿美元将戴尔私有化 ...

  4. 数据库 isnull()、nvl()、ifnull() 使用

    SqlServer 插入字段值 为空 设置默认值 isnull(val_1,val_2) 当val_1为 null 的时候 返回 val_2的值 Oracle nvl(val_1,val_2) 当va ...

  5. c#中的委托使用（方法的调用， 和类的实话）

    方法的调用 delegate int test1(int a); class Program { static int num = 10; static void Main(string[] args ...

  6. 计算闰年_winform

    新建窗体应用程序(如下),新建控件label1,label2,label3,textBOX1,button1,button2 label1的Text属性改为“计算闰年演示” label2的Text属性 ...

  7. 引用 移植Linux到s3c2410上

    引用 bsky 的 移植Linux到s3c2410上来源:http://www.embed.com.cn/downcenter/Article/Catalog12/4000.htm 移植Linux到s ...

  8. 莱特币ltc在linux下的多种挖矿方案详解

    莱特币ltc在linux下的多种挖矿方案详解 4.0.1 Nvidia显卡Linux驱动Nvidia全部驱动:http://www.nvidia.cn/Download/index.aspx?lang ...

  9. csu1306: Manor

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1306 解题思路:唬人的水题,只要按照他的意思打,就能过,不过,数组最好开大点.用到优先队列,也可以 ...

  10. [置顶] 浏览器模式和标准对于javascript的影响

    今天在编写代码的时候遇到了一个莫名其妙的问题,请看下面 <html> <head> <title> Test </title> <!--<m ...