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. 大数据笔记07：大数据之Hadoop的HDFS（特点）

    1. HDFS的特点: (1)数据冗余,硬件容错 (2)流式的数据访问(写一次读多次,不能直接修改已写入的数据,只能删除之后再去写入) (3)存储大文件 2. HDFS适用性和局限性 适用性:(1)适 ...

  2. TP框架多表联查

    join方法import("@.ORG.Page");        $Form   =   M('gly');        $where='';        if ($_PO ...

  3. SharePoint中获取当前登录的用户名几种方式

    第一种方法: System.Web.HttpContext.Current.User.Identity.Name.ToString();或者: SPContext.Current.Site.OpenW ...

  4. CSS 样式属性锦集

    ul#nav > Li 只有一个大于号,是指应用了#nav这个ID的下一级元素的儿子辈Li 元素定义的内容符合这个CSS代码定义的样式,但是孙子辈Li元素定义的内容就不符合这个CSS代码样式了, ...

  5. linux RedHat 5 更新vim.

    概述: 想装 ctags,装不上.看到老外有篇日志,是在vi 7.2版本上运行.怕是vi版本的原因,于是想升级,网上升级的方法写得少,有的写的太无语了,只有他自己看得懂.这里,简单说下.搞半天了,终于 ...

  6. bash 编程中循环语句用法

    1.if 是单分支语句,使用格式如下: if condition ; then statement ….. fi 2.if … else 是双分支语句,使用格式如下: if condition ; t ...

  7. Android WebView支持WebGL

    Android从5.0开始默认支持WebGL,我在实际开发中遇到了一些5.0设备不支持的情况,原来Chromium对运行GPUs不稳定的或者有兼容性问题的设备会禁用WebGL.在Android平台可以 ...

  8. 侧滑RESideMenu的使用

    MainTabBarViewController *mainCtrl = [[MainTabBarViewController alloc] init]; LeftViewController *le ...

  9. java动态缓存技术:WEB缓存应用(转)

    可以实现不等待,线程自动更新缓存 Java动态缓存jar包请下载. 源代码: CacheData.java 存放缓存数据的Bean /** *  */package com.cari.web.cach ...

  10. Install FFmpeg, Mplayer, Mencoder, MP4Box, Flvtool2

    You can use the following tutorial to install ffmpeg and other video modules in your centos server.F ...