USharing
开放博客

jquery ajax+php实现简单交互

由于平时要与ajax打交道,所以选择了简单基础的jquery的ajax方法来完成我的相关需求,这里只是很简单的做一个演示来促进自己对ajax与php实行交互的一些理解。
1.首先写一个ajax方法常见的格式:

$.ajax({

    type: 'POST',
    url: url ,
    data: data ,
    success: success ,
    dataType: dataType

});

2.简单的对ajax方法的参数进行一些描述

url (必需)规定把请求发送到哪个URL。

data 可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

dataType (可选)规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

3.标注一个刚刚自己写的简单的实现input标签失去焦点来传输给php

<div>
    <span>NAME:</span><input type="text" id="name"/><br /><br/>
    <span>ADDRESS:</span><input type="text" name="address" onblur="change()" />
</div>
<script type="text/javascript">
    function change(item) {
        var txt1 = $("#name").val();
        var txt2 = $("input[name=address]").val();
        $.ajax({
            type: 'post',
            url: 'change.php',
            data: {name: txt1, address: txt2},
            dataType: 'json',
            success: function (data) {
                if (data.status == 0) {
                    alert(data.msg);
                } else {
                    alert(data.msg);
                }
            },
            error: function () {
                alert("程序异常");
            }
        });
    }
</script>

这样对于change.php文件就可以接收到传输的相关数据来进行处理,我非常简单的写了一个接收数据的php文档,代码如下:

<?php
//判断传过来的name是否为空来判断
if(!empty($_POST['name'])){
    $value = array("status"=>"1","msg"=>"保存成功");
    echo json_encode($value);
}
else {
    $value = array("status"=>"0","msg"=>"保存失败");
    echo json_encode($value);
}

由于我选择datatype是json格式,所以就通过json_encode函数进行处理返回数据。
在网上看到一个ajax注意方式,如下:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

来源:https://www.jianshu.com/p/c6cc84b556ff

赞(0) 打赏
未经允许不得转载:USharing » jquery ajax+php实现简单交互

觉得文章有用就打赏一下文章作者

微信扫一扫打赏