php应用jquery做ajax操作
以下是全部代码:
<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操作的更多相关文章
- 【JAVAWEB学习笔记】28_jquery加强:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(Jav ...
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- jQuery常用ajax操作
在做asp.net项目的时候经常会用到ajax操作,现总结常用的ajax操作供平时项目中参考 第一种: 前端代码: <script type="text/javascript" ...
- jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结
一.$.ajax用法与举例 jQuery.ajax(url,[settings]) ——返回值:XMLHttpRequest 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJ ...
- 利用jquery对ajax操作,详解原理(附代码)
1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...
- jQuery Ajax 操作函数及deferred对象
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- 使用jquery来完成AJAX操作
jQuery对Ajax操作进行了封装,在jQuery中最底层的方法是$.ajax(),第二个是load(),$.get()和$.post(),第三层是$.getscript()和$.getJSON() ...
- jQuery 与 Ajax 的应用
Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...
随机推荐
- what's this? 浅谈js中this的指向问题
刚刚学习js的朋友可能和我一样,看到代码中的this总是一脸懵逼,不知道this到底指向谁.经过一段时间的了解,我想跟大家分享下自己的理解. 何时出现this 函数在调用的时候,会自动获得两个特殊变量 ...
- 细说Cookie
阅读目录 开始 Cookie 概述 Cookie的写.读过程 使用Cookie保存复杂对象 Js中读写Cookie Cookie在Session中的应用 Cookie在身份验证中的应用 Cookie的 ...
- Linux打包与压缩及tar命令详解
打包和压缩 在linux中,打包和压缩可以说是两个不同的概念,弄清这两个概念对于我们理解复杂的文件后缀有非常大的帮助 打包 将若干个文件和目录打包在一起变成一个大的文件,这时只是简单的打包,所以一 ...
- Ionic2学习笔记(8):Local Storage& SQLite
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html Ionic2可以有两种方式来存储数据,Local S ...
- ASP.NET MVC4 Forms 登录验证
Web.config配置: 在<system.web>节下: <authentication mode="Forms"> <forms loginUr ...
- Oracle 英文 非标准格式 日期 格式化
最近在处理一张表的时候,需要按照日期排序,日期字段中日期的格式有两种. 格式一:07-Aug-2015 格式二:10/28/16 日期转化及格式化sql语句: select to_date('07-A ...
- Asp.net 面向接口可扩展框架之“Mvc扩展框架及DI”
标题“Mvc扩展框架及DI”有点绕口,我也想不出好的命名,因为这个内容很杂,涉及多个模块,但在日常开发又密不可分 首先说Mvc扩展框架,该Mvc扩展就是把以前的那个Mvc分区扩展框架迁移过来,并优化整 ...
- HttpClient通过Post上传多个文件
public static String sendFilesPost(String url, String fileNames) { HttpClient httpClient = null; Htt ...
- 复杂的xml转化为java实体
一.样例一: 以根据订单号向支付宝查询支付是否成功为例(成功信息) 失败信息: <?xml version="1.0" encoding="utf-8"? ...
- codis集群安装
在网上找了很多codis的集群安装方法,看起来都是大同小异,本人结合了大多种方法完成了一套自己使用的codis的集群安装,可以供大家学习使用,如果有什么问题或者不懂的地方欢迎指正 1.集群规划: 三台 ...