jQuery确实方便，下面做个简单的Ajax调用：

建立一个简单的html文件：

 <!DOCTYPE HTML>

 <html>

 <head>

 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //按钮单击时执行

         $("#testAjax").click(function(){

               //取Ajax返回结果

               //为了简单，这里简单地从文件中读取内容作为返回数据

               htmlobj=$.ajax({url:"/Readme.txt",async:false});

                //显示Ajax返回结果

                $("#myDiv").html(htmlobj.responseText);

          });

     });

 </script>

 </head>

     <body>

         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>

         <button id="testAjax" type="button">Ajax改变内容</button>

     </body>

 </html>

好了，点击按钮就可以看到效果了。

当然，jQuery的Ajax调用可以控制项很多，这里演示了简单的调用。

注意你自己的jquery引用路径。

好吧，做一个调用后台的例子：

 <!DOCTYPE HTML>

 <html>

 <head>

 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //按钮单击时执行

         $("#testAjax").click(function(){

               //Ajax调用处理

             var html = $.ajax({

                type: "POST",

                url: "test.php",

                data: "name=garfield&age=18",

                async: false

             }).responseText;

             $("#myDiv").html('<h2>'+html+'</h2>');

          });

     });

 </script>

 </head>

     <body>

         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>

         <button id="testAjax" type="button">Ajax改变内容</button>

     </body>

 </html>

后台代码：

<?php

    $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';

    echo $msg;

现在已经可以从后台来获取数据了!

当然，我们还可以这样来调用Ajax:

 <!DOCTYPE HTML>

 <html>

 <head>

 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //按钮单击时执行

         $("#testAjax").click(function(){

               //Ajax调用处理

             $.ajax({

                type: "POST",

                url: "test.php",

                data: "name=garfield&age=18",

                success: function(data){

                         $("#myDiv").html('<h2>'+data+'</h2>');

                   }

             });

          });

     });

 </script>

 </head>

     <body>

         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>

         <button id="testAjax" type="button">Ajax改变内容</button>

     </body>

 </html>

注意，

success: function(data)

中的data参数可以改为别的名称，比如success: function(msg)，msg（data）为返回的数据。 此处为回调函数的参数，而非

data: "name=garfield&age=18"

中的Ajax调用中的data参数。

jQuery简单的Ajax调用示例的更多相关文章

  1. jQuery简单的Ajax调用

    index.php 的代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...

  2. iframe式ajax调用示例

    1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...

  3. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  4. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  5. 最简单的ajax调用webservice

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHelloWorld ...

  6. ajax 调用示例

    $.ajax({ type: "post", url: url, data: { "key": "ValidateMobile", &quo ...

  7. jquery 封装的ajax调用

    (function(){    var Ploy = {        Config: {            ajaxUrl: "/ajax/ploy.ashx"        ...

  8. WebService--概述、JDk实现、AJAX调用

    一.Webservice概述 W3C组织对其的定义是,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计. Webservice服务通常被定义为一组模块化的API,它们可以通过网络进行调用,来 ...

  9. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

随机推荐

  1. C#中hashtable的赋值、取值、遍历、排序操作

    一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似key/value的键值对,其 ...

  2. iis7 发布mvc 遇到的HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容

    iis 7上发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容 提示里面的解决方法是: 如果不希望启用目录浏览,请确保配置了默认文档并且该文件存在. 使用 II ...

  3. RecyclerView更通用——listView的onItemClick,onLongItemClick,addHeaderView,addFooterView

    一.点击事件 setOnItemClickListener,setOnItemLongClickListener RecyclerView中虽然没有提供上面这两个接口,但是给我们提供了另外一个接口:O ...

  4. Android 5.1 Camera 架构学习之Camera初始化

    Android Camera 采用C/S架构,client 与server两个独立的线程之间(CameraService)使用Binder通信. 一 CameraService的注册. 1.手机开机后 ...

  5. DWZ简介及其使用

    来源:http://blog.csdn.net/t123012009065/article/details/8286826 DWZ简介:   DWZ富客户端框架(jQuery RIA framewor ...

  6. 1.Tomcat配置

    1.启动 解压缩安装包后,点击startup.bat,保持控制台窗口开启 浏览器中输入http://localhost:8080 后看到启动界面则表示启动成功 点击shutdown.bat则关闭Tom ...

  7. javascript解析从服务器返回的json格式数据

    在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

  8. ext中处理Combobox组件点击触发后台事件的问题

    ext的Combobox组件在绑定数据的时候需要一个Store来绑定数据,在store里面我们可以设置autoLoad属性,这个属性表示Store可以自动的到后台获取数据,ext实质上就是封装好的ja ...

  9. the introduction of scrapy1.1 tools

    scrapy xxcommand:输出xxcommand的相关信息 help:scrapy的基本命令,用于查看帮助信息 version:查看版本信息,可见-V参数查看各组件的版本信息: startpr ...

  10. C++学习笔记1——const

    Const 限定符 1. 等价 //const对象必须初始化//C++中const修饰的变量不能改变//C中const修饰的变量可以通过指针修改 2. ; const int j = i;//变量给常 ...