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. hdu_1875_畅通工程再续 prim和kruskal

    这个题是个典型的最小生成树的题目,但是刚开始怎么都过不了,后来发现两种写法都有疏忽,但是prim的到目前为止不懂为什么刚开始的不对,kruskal算法,并查集的初始条件从0开始写成从1开始了,所以已知 ...

  2. el和jstl

    <%@page import="cn.bdqn.bean.News"%> <%@ page language="java" import=&q ...

  3. NOI2015 程序自动分析

    /* 十分简单的题面 离散化一下 然后并茶几一下就OK了 跑的死慢 可能还有更优的方法吧 */ #include<iostream> #include<cstdio> #inc ...

  4. C# 面向对象 , 抽象基类

    抽象基类 关键字,  abstract abstract class SSS { public void aaa() { } } 作为抽象基类, 只能在 继承关系 中 担任父类的角色,不能出现在其他地 ...

  5. JAVA File转Byte[]

    /** * 获得指定文件的byte数组 */ public static byte[] getBytes(String filePath){ byte[] buffer = null; try { F ...

  6. mockito学习笔记

    mockito http://mockito.github.io/mockito/docs/current/org/mockito/Mockito.html

  7. WPF Mahapps.Metro 设置主题样式

    /// <summary> /// 设置App样式 /// </summary> /// <param name="accentName">窗口 ...

  8. JavaScript--基本包装类型+Math对象

    1. 基本包装类型 1)为了便于操作基本类型值,ECMAScript提供了3个特殊的引用类Boolean, Number, String       每当读取一个基本类型值的时候,后台就会创建一个对应 ...

  9. Bencode编码解析的C++实现

    Ben编码的基本规则 B编码中有4种类型:字符串.整型.列表.字典. 字符串 字符串的编码格式为:<字符串的长度>:<字符串>,其中<>括号中的内容为必需.例如,有 ...

  10. 自定义窗口 mfc

    typedef struct _WNDCLASS { UINT style; //制定窗口的类型 WNDPROC lpfnWndProc; int cbClsExtra; //额外的数值 int cb ...