jQuery Ajax json 数据提供保存代码

作者:编程    发布时间:2019-12-17 23:23     浏览次数 :

[返回]

本文实例分析了thinkphp中ajax与php响应过程。分享给大家供大家参考。具体分析如下:

jQuery Ajax是一个简化了以前原生态js ajax一个非常优秀的插件了,有了jquery ajax像就像吃饭一样的简单,下面我整理了一些jquery ajax应用示例与大家一起来学习一下,希望文章对大家有帮助。

jQuery Ajax json 数据提供保存代码

一般将前台页面搜索结果中,不喜欢的内容,删除掉,因为整个网站的编程框架式thinkphp,运用js中的ajax对页面进行响应,调用后台php接口,实现前台和后台数据库的同时更新.

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。

jquery ajax 网页特效on 数据提供保存代码
<html>
<head>
<title>jquery ajax 网页特效on 数据提供保存代码</title>
</head>

首先我们需要做的就是在前台页面中添加一个文本“删除”,可以这么添加:复制代码 代码如下:删除

Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load() 函数即可。下面是一个用于更新统计信息的示例:

<script language="网页特效" src="jquery.js"></script>
<script language="网页特效">
$(document).ready(function ()
{
   $('#send_ajax').click(function (){
     var params=$('input').serialize(); //序列化表单的值
     alert(params);    
$.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>

上面的html代码的意思:就是给删除添加一个href,这个href是个js函数,类似于超链接的作用,当然对于我这样的新手在刚开始的时候会有疑惑,我们平时的超链接不是这样的,网页中很多的javascript:void,那程序怎么知道用户点击删除后,会响应其真正对应的js函数呢?别急,这就是为什么会为删除添加id以及class这样的标签,相信我把js中的代码公布出来以后你就会明白了,代码如下:复制代码 代码如下:jQuery.click{ if{ var _this=this; var id = jQuery; jQuery.ajax({ url : '/Search/index.php/Jason/delete?', data : {'id':id}, dataType : 'json', success : function{ var del = data.del; if{//删除成功 jQuery.parents; }else{//删除失败 alert;大家看函数的头部:jQuery.click(),jQuery后面的标签是很重要的,这就保证了jquery很准确的响应页面中用户点击的“位置”,添加的事件为click(),在click里添加响应事件的代码:var id = jQuery;获取a对应的id,因为这个id是我们删除数据库时用到的链接id,当然这种直接明文的方式不好,在这里只是介绍整个响应过程。调用ajax,实现异步的运行整个过程。我们设置了js接受的是json串,这里的方式应该有很多种吧,我没有去尝试,大家要是有兴趣可以自行尝试一下。/Search/index.php/Jason/delete?这句话就是js去请求php的接口,php接口对用的代码如下:

 代码如下

ajax_json.php 文件
<?php

注意ajax在求php接口时的路径,也就是delete函数必须放在JasonAction.class.php中,此例子是必须这样的:复制代码 代码如下:public function delete{ $userId = session;//用户登录 if{ $a = M; $id = $this->_get; $result=$a->where;//删除 if{ $arr = array; }else{ $arr = array; } $json_str = json_encode; echo $json_str;//返回给js } } }相信大家对上面的代码不会陌生吧,整个过程都是thinkphp框架内部配置完毕的.

复制代码

//$arr = $_post; //若以$.get()方式发送数据,则要改成$_get.或者干脆:$_request
$arr = $_request;
$arr['append'] = '钱';

$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);
    }
}

var del = data.del;这句是接受php代码返回来的json串中del这个key的value,进而在前台进行页面更新和响应.复制代码 代码如下:if{//删除成功 jQuery.parents;//这句话就是后台删除成功后,直接在前台对响应的div进行删除,这样性能就会很快,无需进行后台数据的重新提取至前台页面中, }else{//删除失败 alert; }整个响应的过程就是这样,至于效果优化,是优化和细化方面的问题,后来,身边的同事又告诉我前台移除响应链接的另一个动态效果:

$(‘#stats’).load(’stats.html’);

?>
jquery.js文件到官网下载就ok了

即将:复制代码 代码如下:jQuery.parents;替换为:复制代码 代码如下:jQuery.parents.slideUp{ jQuery;大家不妨试试效果,很不错的,好了,响应过程记载完毕,只是自己的个人见解和认知.

通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get(),这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。

Ajax json 数据提供保存代码 jquery ajax 网页特效on 数据提供保存代码 html head titlejquery ajax 网页特效on 数据提供保存代码/title /head script l...

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

清单 4. 使用 Ajax 向页面发送数据

 代码如下

复制代码

$.post(’save.cgi’, {

text: ‘my string’,

number: 23

}, function() {

alert(‘Your data has been saved.’);

});

如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。

清单 5. $.ajax() 使 Ajax 由复杂变简单

 代码如下

复制代码