zoukankan      html  css  js  c++  java
  • 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;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>

  • 相关阅读:
    使用路由传参时,query与params的区别!
    写前端页面步骤----vue+iview
    使用vue做表单验证
    vue中find函数
    @Controller和@RestController的区别?
    JavaScript 拥有动态类型
    Console的9种用法
    Navicat连接Oracle报ORA-12737错误
    oracle查询数据库连接数相关
    oracle存储过程把查询到的值更新到别的表
  • 原文地址:https://www.cnblogs.com/aspphp/p/4817120.html
Copyright © 2011-2022 走看看