<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">

$(document).ready(function ()
{
   $('#send_ajax').click(function (){
     var params=$('input').serialize(); //序列化表单的值
     $.ajax({
       url:'ajax_json.php', //后台处理程序
       type:'post',         //数据发送方式
       dataType:'json',     //接受数据格式
       data:params,         //要传递的数据
       success:update_page //回传函数(这里是函数名)
     });
   });

//$.post()方式：
$('#test_post').click(function (){
    $.post(
      'ajax_json.php',
      {
        username:$('#input1').val(),
        age:$('#input2').val(),
        sex:$('#input3').val(),
        job:$('#input4').val()
      },
      function (data) //回传函数
      {
        var myjson='';
        eval('myjson=' + data + ';');
        $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);
      }
    );
   });

//$.get()方式：
$('#test_get').click(function ()
{
    $.get(
      'ajax_json.php',
      {
        username:$("#input1").val(),
        age:$("#input2").val(),
        sex:$("#input3").val(),
        job:$("#input4").val()
      },
      function(data) //回传函数
      {
        var myjson='';
        eval("myjson=" + data + ";");
        $("#result").html(myjson.job);
      }
    );
});
});

function update_page (json) //回传函数实体，参数为XMLhttpRequest.responseText
{
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>

<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
    <p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
    <p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
    <p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
    <p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>

</body>
</html>

PHP 文件 ajax_json.php：

<?php
//$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = '测试字符串';
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;

function my_json_encode($phparr)
{
    if(function_exists("json_encode"))
    {
      return json_encode($phparr);
    }
    else
    {
      require_once 'json/json.class.php';
      $json = new Services_JSON;
      return $json->encode($phparr);
    }
}

jQuery AJAX实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  5. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  6. 转：jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  7. C#中jQuery Ajax实例（二）

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  8. C#中jQuery Ajax实例（一）

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

  9. 【JavaScript】jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

随机推荐

  1. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  2. ASP.NET MVC使用Bundle来打包压缩js和css

    Bundle它是用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 1.BundleConfig配置Bundl ...

  3. SQLServer之数据类型

    1.整数数据类型整数数据类型是常用的数据类型之一,主要用于存储数值,可以直接进行数据运算而不必使用函数转换.(1).bigint 每个bigint存储在8个字节中,其中一个二进制位表示符号位,其它63 ...

  4. Delphi面向对象---接口

    从Delphi3开始支持接口.接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两个方面的内容: 1)一方面是实现这个接口 2)另一方面是定义接口的客户 一个类能够实现多个接 ...

  5. 【转载】Pyqt QSplitter分割窗口

    转载来自: http://blog.sina.com.cn/s/blog_4b5039210100h3ih.html 分割窗口在应用程序中经常用到,它可以灵活分布窗口布局,经常用于类似文件资源管理器的 ...

  6. 快速熟悉python 下使用mysql（MySQLdb）

    首先你需要安装上mysql和MySQLdb模块(当然还有其他模块可以用),这里我就略过了,如果遇到问题自行百度(或者评论在下面我可以帮忙看看) 这里简单记录一下自己使用的学习过程: 一.连接数据库 M ...

  7. 【java IO File】统计项目代码总共多少行

    统计项目代码总共有多少行 思想: 1.首先将不需要迭代的文件夹,保存在集合中,不满足的就是需要迭代的文件夹 2.将需要进行统计行数的代码文件保存在集合中,满足的就是需要计算文件行数的文件 3.迭代方法 ...

  8. WebAPI身份验证

    对WebAPI接口的开放当然要做控制,需要身份验证如何做到呢. 进行身份验证后的 服务器拒绝了访问! 第一步添加一个CustomHandler.cs的类 1: using System; 2: usi ...

  9. Java调优经验谈

    对于调优这个事情来说,一般就是三个过程: 性能监控:问题没有发生,你并不知道你需要调优什么?此时需要一些系统.应用的监控工具来发现问题. 性能分析:问题已经发生,但是你并不知道问题到底出在哪里.此时就 ...

  10. shell-bash学习04读取输入、分隔符、流程控制

    读入输出 输入通常是通过stdin或参数传递给命令; 输出出现在stderr或stdout; 管道,过滤器,管道操作符: cmd1 | cmd2 | cmd3; //最后还有输出 ls | cat - ...