以下是全部代码：
<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
$('#send_ajax').click(function (){
var params=$('input').serialize(); //序列化表单的值
$.ajax({
ckeditor/" target="_blank">fckeditor/editor/'ajax_json.php'">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);
}
}
?>

以上是原文：挺好的，以下是本人根据实际应用的一个例子。

只是用到了$.get();这段，用于在信息列表中点击更改文章状态（审核，推荐之类的）的操作。

//$.get()方式：
$('.test_get').click(function (){
  var data_id = $(this).attr("data-id");
  var id = $(this).attr("id");
  var typename = $(this).attr("name");
  var data_value_id = $(this).attr("data-value");
  if(data_value_id==1){
    var data_id_local = 0;
    var data_check = '否 <i class="icon-remove"></i>';
  }else{
    var data_id_local = 1;
    var data_check = '是 <i class="icon-ok"></i>';  }
    $('#'+id).attr("data-value",data_id_local);
    $('#'+id).html(data_check);
    $.get(
      'ajax_json.php',//这人文件可以接收到以下三个参数，可以写多个，最后一个不要带“，”;$_GET['data_id']
      {
        data_id:data_id,
        data_value_id:data_value_id,
        typename:typename

},
        function(data) //回传函数
        {
//这块没做返回值 处理，感觉有点慢，在上边直接处理啦，
        }
        );
  });

以下是html代码：

<tr class="gradeX">
<td>66</td>
<td data-value="1" data-id="66" name="isindex" class="test_get " title="点击更改状态" id="isindex66">是 <i class="icon-ok"></i></td>
<td data-value="1" data-id="66" name="isnav" class="test_get " title="点击更改状态" id="isnav66">是 <i class="icon-ok"></i></td>
<td>
<a href="#">和暄清肤霜[和暄清肤霜]</a></td>
<td>2015-09-1 00:00:00</td>
<td class="center ">
<a href="#" class="btn">编辑</a>
<a href="#" class="btn">删除</a>
</td>
</tr>
<tr class="gradeX">
<td>59</td>
<td data-value="0" data-id="59" name="isindex" class="test_get " title="点击更改状态" id="isindex59">否 <i class="icon-remove"></i></td>
<td data-value="1" data-id="59" name="isnav" class="test_get " title="点击更改状态" id="isnav59">是 <i class="icon-ok"></i></td>
<td><a href="#">【湿清霜】效果[【湿清霜】效果]</a></td>
<td >2015-09-1 00:00:00</td>
<td class="center ">
<a href="#" class="btn">编辑</a>
<a href="#" class="btn">删除</a>
</td>
</tr>

php应用jquery做ajax操作的更多相关文章

  1. 【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(Jav ...

  2. 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  3. jQuery常用ajax操作

    在做asp.net项目的时候经常会用到ajax操作,现总结常用的ajax操作供平时项目中参考 第一种: 前端代码: <script type="text/javascript" ...

  4. jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结

    一.$.ajax用法与举例 jQuery.ajax(url,[settings])     ——返回值:XMLHttpRequest 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJ ...

  5. 利用jquery对ajax操作，详解原理（附代码）

    1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...

  6. jQuery Ajax 操作函数及deferred对象

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  7. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  8. 使用jquery来完成AJAX操作

    jQuery对Ajax操作进行了封装,在jQuery中最底层的方法是$.ajax(),第二个是load(),$.get()和$.post(),第三层是$.getscript()和$.getJSON() ...

  9. jQuery 与 Ajax 的应用

    Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...

随机推荐

  1. Mybatis高级查询之关联查询

    learn from:http://www.mybatis.org/mybatis-3/zh/sqlmap-xml.html#Result_Maps 关联查询 准备 关联结果查询(一对一) resul ...

  2. animation-fill-mode的一些思考

    animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...

  3. TeamCity : 配置第一个工程

    前面我们已经创建了TeamCity Server 和一个 Agent,接下来我们为一个.net core 控制台程序配置自动化的编译. 创建 .net core 项目 我们在本地创建一个简单的 .ne ...

  4. ubuntu中LAMP环境搭建及ubuntu语言和输入法设置

    1.  LAMP 的安装 1) sudo apt-get install apache2 mysql-server mysql-client php5 php5-gd php5-mysql 2) 存放 ...

  5. linux下安装mysql

    下载Mysql包 因为mysql比较大,我们不能像安装nginx和php那样,通过下载源码,编译成二进制安装.mysql安装比php和nginx稍微麻烦一点. 这里mysql我们直接下载编译好的二进制 ...

  6. Spring学习系列(三) 通过Java代码装配Bean

    上面梳理了通过注解来隐式的完成了组件的扫描和自动装配,下面来学习下如何通过显式的配置的装配bean 二.通过Java类装配bean 在前面定义了HelloWorldConfig类,并使用@Compon ...

  7. 【夯实Mysql基础】记一次mysql语句的优化过程

    1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是 链接了5个表同时使 ...

  8. Tomcat下使用c3p0配置jndi数据源

    下载c3p0包: 下载地址:https://sourceforge.net/projects/c3p0/files/?source=navbar 解压后得到包:c3p0-0.9.2.jar,mchan ...

  9. OData V4 系列 .net应用

    OData 学习目录 添加 OData Client Code Generator 扩展 添加OData T4生成工具 修改 T4 模板的 MetadataDocumentUri 运行Web项目,之后 ...

  10. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...