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 ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...
随机推荐
- Zend Studio主题的设置
用了两年的Zend Studio,一直是默认的白色主题,让人都产生了视觉疲劳,今天才发现Zend Studio的设置方法: 步骤1:help–>install new software…
- js构建ui的统一异常处理方案(三)
笔者之前分析了如何实现js的责任链异常处理的方法,通过promise这个异步模型,我们能够对同步方法和异步方法的两种情况,均可以实现责任链模式.有了这些武器,我们就可以开始设计ui的统一异常处理方案了 ...
- mybatis入门基础(三)----SqlMapConfig.xml全局配置文件解析
一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) settings(全局配置参数) typeAiases(类型别名) typeHandlers(类型处理器 ...
- 数据结构Java实现01----算法概述
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- iOS-重回block小白之路
在我刚刚接触iOS开发的时候,是通过MJ老师讲的OC基础入门的,iOS圈的人应该基本都知道MJ大神吧,即便如此大神,讲解完block之后我依然感觉晕晕乎乎的,直到后来真正进公司做项目,依然感觉这是自己 ...
- WPF模糊效果(BlurEffect)
<TextBlock Padding="10" Text="设置模糊" FontSize="32" Background=" ...
- .NET 扩展方法 (一)
我还记得刚刚学编程的时候,老师经常会提到一句话:注意空指针.所以经常在某些“入口”位置,进行代码校验,空指针的判断就是其中的一项工作. string类型作为常用的数据类型,它在项目中出现的机率极高,所 ...
- Redis所需内存 超过可用内存怎么办
爬虫和转载请注明原文地址:博客园蜗牛 http://www.cnblogs.com/tdws/p/5727633.html Redis所需内存 超过可用内存怎么办 Redis修改数据多线程并发—Red ...
- datagridview 单元格格式转换注意
datagridview 单元格内容进行比较时要注意正确写法要用强制转换,否则出错Convert.ToString(grd_order.SelectedRows[0].Cells[1].Value)= ...
- C#File类常用的文件操作方法(创建、移动、删除、复制等)
File类,是一个静态类,主要是来提供一些函数库用的.静态实用类,提供了很多静态的方法,支持对文件的基本操作,包括创建,拷贝,移动,删除和 打开一个文件. File类方法的参量很多时候都是路径path ...