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 ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...
随机推荐
- 我的java后端书架
- Rafy 领域实体框架演示(2) - 新功能展示
本文的演示需要先完成上一篇文章中的演示:<Rafy 领域实体框架示例(1) - 转换传统三层应用程序>.在完成改造传统的三层系统之后,本文将讲解使用 Rafy 实体框架后带来的一些常用功能 ...
- Windows下80端口被pid为4的System进程占用解决方法
前言 之前是Windows 7系统,前段时间装了Windows 10,php环境还没来得及搭建.今天折腾了一下,是用nginx+php,端口是80(已经停止了iis服务),nginx就是起不来,十之八 ...
- jquery easyui使用(三)······datagrid加载数据(已解决)
<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...
- jQuery手机菜单
效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm ...
- 【C#公共帮助类】JsonHelper 操作帮助类, 以后再也不用满地找Json了,拿来直接用
四个主要操作类:JsonConverter .JsonHelper .JsonSplit .AjaxResult 一.JsonConverter: 自定义查询对象转换动态类.object动态类转换j ...
- 零基础如何学习java更有效呢?
零基础学java,不知道该如何入手?也不知道学习的方向,很多人会问零基础怎么样学习,有没有什么入门的书籍推荐:只要方法正确,零基础学好java也是有机会的哦. 一.理解Java思想 Java是一门面向 ...
- 使用PHPMailer发送邮件
如果要使用php发送邮件,则可以使用PHP 内置的mail() 函数,但是mail()函数需要有服务器支持 必须有自己的邮件服务器,如果使用stmp服务来发送邮件的话相当于代替别人发送,而不是从自己服 ...
- 【小贴士】探一探javascript中的replace
javascript字符串与数组有很多精巧的方法,比如splice.indexOf,而replace在字符串处理中偶尔会产生让人愉悦的效果 比如underscore中的模板引擎替换部分,又如信用卡分割 ...
- Android 6.0 权限管理最佳实践
博客: Android 6.0 运行时权限管理最佳实践 github: https://github.com/yanzhenjie/AndPermission