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. JAVA中IO和异常处理练习

    1.SystemI\O练习:1)通过键盘输入若干字符,并通过显示器输出:2)定义一个静态方法validOrNot()用于对输入的字符进行合法性校验,若包含非英文字符,则抛出IllegalStringE ...

  2. Girls and Boys（匈牙利）

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. swift菜鸟入门视频教程-07-闭包

    本人自己录制的swift菜鸟入门,欢迎大家拍砖.有什么问题能够在这里留言. 主要内容: 闭包表达式(Closure Expressions) 跟随闭包(Trailing Closures) 值捕获(C ...

  4. Codeforces Round #315 (Div. 2B) 569B Inventory 贪心

    题目:Click here 题意:给你n,然后n个数,n个数中可能重复,可能不是1到n中的数.然后你用最少的改变数,让这个序列包含1到n所有数,并输出最后的序列. 分析:贪心. #include &l ...

  5. week4_motion_of_ball_1(小球运动)——最基本

    # Ball motion with an explicit timer import simplegui # Initialize globals width = 600 height = 600 ...

  6. 使用Atlas实现MySQL读写分离+MySQL-（Master-Slave）配置

    参考博文: MySQL-(Master-Slave)配置  本人按照博友北在北方的配置已成功  我使用的是 mysql5.6.27版本. 使用Atlas实现MySQL读写分离 数据切分——Atlas读 ...

  7. 处理IIS报“由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面”

    “由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面” 详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 C ...

  8. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  9. Hadoop 2.x(YARN)安装配置LZO

    今天尝试在Hadoop 2.x(YARN)上安装和配置LZO,遇到了很多坑,网上的资料都是基于Hadoop 1.x的,基本没有对于Hadoop 2.x上应用LZO,我在这边记录整个安装配置过程 1. ...

  10. commoncrawl 源码库是用于 Hadoop 的自定义 InputFormat 配送实现

    commoncrawl 源码库是用于 Hadoop 的自定义 InputFormat 配送实现. Common Crawl 提供一个示例程序 BasicArcFileReaderSample.java ...