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. LSI MegaCli 命令使用4

    Dell服务器常用管理命令总结准备新版本的 MegaCli-1.01.24-0.i386.rpm 会把程序安装在/opt下,可以自定义安装目录,例如:rpm --relocate /opt/=/usr ...

  2. nyoj 17

    // nyoj 17        代码如上,用的是dp,总的来说就是对一个字符串 从末尾开始比较,设定一个数组,存放每个单调字串的最大长度,最后比较... //要注意的就是里面if语句对于每次字符比 ...

  3. 苹果手机button有色差

    input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearan ...

  4. 武汉科技大学ACM ：1010: 零起点学算法103——一只小蜜蜂...

    Problem Description 有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. Input 输入数据的第一 ...

  5. uva 12207 - That is Your Queue

    #include <cstdio> #include <iostream> #include <deque> using namespace std; int ma ...

  6. @NotNull丶@NotBlank丶@NotEmpty

    1.@NotNull:不能为 Null,但是可以为Empty:用在基本数据类型上. @NotNull(message="{state.notnull.valid}", groups ...

  7. Spring4.0学习笔记(1) —— 基础知识

    1.基本定义 IOC: 其思想是反转资源获取的方向,传统的资源查找方式要求组件向容器发起请求查找资源,作为回应,容器适时的返回资源,而应用了 IOC之后,容器主动将资源推送给它所管理的组件,组件索要做 ...

  8. VS2010 IE10 调试时报“未能将脚本调试器附加到计算机”，已经附加了一个进程

    解决办法:以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7Debug\ms ...

  9. 开VPN后能上网

    @echo ************************************************************************:start@echo off set /p ...

  10. tomcat可以访问到软链接设置

    tomcat/conf/context.xml设置<Context allowLinking="true"> 就可以啦.