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. mysql merge table

    SELECT COUNT(*) FROM `comment` SHOW CREATE TABLE `comment` CREATE TABLE `comment1` ( `id` INT(8) NOT ...

  2. viminfo: 无效的启动字符

    当自己进入一个用户,使用vi打开一个文件时,出现以下情况: [gexd@localhost ~]$ vi test.c E575: viminfo: 无效的启动字符 位于行: int main() . ...

  3. XMPP--- error : linker command failed with exit code 1

    error: linker command failed with exit code 1 (use -v to see invocation) 错误原因:libidn.a文件没添加上去 解决方法:l ...

  4. Cloud Foundry中warden的网络设计实现——iptable规则配置

    在Cloud Foundry v2版本号中,该平台使用warden技术来实现用户应用实例执行的资源控制与隔离. 简要的介绍下warden,就是dea_ng假设须要执行用户应用实例(本文暂不考虑ward ...

  5. 在AD09中查找元件和封装

    在AD09中查找元件和封装 Altium Designer 软件方法/步骤 Altium下Miscellaneous Devices.Intlib元件库中常用元件有: 电阻系列(res*)排组(res ...

  6. d3.js入门1：安装配置

    D3 是当前流行的数据可视化工具,通过本文能有对 D3 有一个初步认识. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名 ...

  7. 关于PsCreateSystemThread函数

    研究了1天这个...MSDN说的不是很清楚NTSTATUS PsCreateSystemThread(  _Out_      PHANDLE ThreadHandle,  _In_       UL ...

  8. Qt如何读取ico文件中的image（使用QImageReader和QIcon）

    ico文件是一个容器,内部可以装载许多个image,我们可以通过QIcon的pixmap方法来获取需要的image QPixmap pixmap ( const QSize & size, M ...

  9. JavaScript：获取系统当前时间，构造格式化的字符串

    var getNowFormatDate = function() {    var date = new Date();    var seperator1 = "-";    ...

  10. MFC的消息映射机制揭秘

    MFC的设计者们在设计MFC时,紧紧把握一个目标,那就是尽可能使得MFC的代码要小,速度尽可能快.为了这个目标,他们使用了许多技巧,其中很多技巧体现在宏的运用上,实现MFC的消息映射的机制就是其中之一 ...