ajax的提交数据到另一PHP的问题

我的HTML代码是这样的

<form>
  <input type="text" name="post_title" placeholder="文章标题">
  <br>
  <textarea name="post_content" id="post_content" class="form-control" rows="12" placeholder="文章内容"></textarea>
  <br>
  <select id="sort" name="blogsort">
    <option value="-1">选择分类</option>
    <option value="32">软件分享</option></select>
  <br>
  <input type="button" id="user_post" name="submit" value="发布文章">
  <input type="hidden" name="action" value="post.new">
</form>

我ajax是这样写的 但是程序没有响应

$(document).ready(function() {  $('.user_post').on('click',
    function() {
        var form = $(this).parent().parent().parent();
        var inputs = form.serializeObject();
        $.ajax({
            type: "POST",
            url: jsui.uri + 'user/reg.php',
            alert(url)
            data: inputs,
            dataType: 'json',
            success: function(data) {
                if (data.msg) {
                    alert(data.msg);
                }
                if (data.error) {
                    alert(data.error);
                    return
                }
                if (data.goto) {
                    location.href = data.goto;
                }
            }
        });
    })
});

url: jsui.uri + 'user/reg.php',
alert(url)
data: inputs,

你的ajax请求中的 alert(url) 这一段删掉再试。另外,在浏览器下按F12看控制台有没有错误。

$('.user_post') 查找的是类,html 中 user_post 是id, 应写为 $('#user_post')

network里看看,是否发送了请求,再看看有什么错误。如果请求都没发送,确认一下 $.ajax确实运行了,可以在里面价格error看看。还有你这个是点击触发,你点击一下看看

img

错误代码

  1. css选择器欲选择的标签属性是id不是class ,因此需要更改成 $('#user_post')
  2. ajax的大括号内部已经是json对象了,json对象内怎么能写 js代码呢,怎么能写alert()呢,把教你这样写的老师找出来往死里打。
  3. serializeObject()方法并不是jQuery本身的方法,在github或其他地方能够找到该方法的重写,因此这里直接调用会报错,正确写法请见最下边的建议源码
  4. 如果该段js的执行是在html dom渲染的最底下,就不需要加 $(document).ready();
    上述是展出的js中存在的问题。

关于ajax提交

上述代码由于ajax提交的url上拼接了一个前缀,在没有上下文的前提下看不到url全地址,因此不清楚是否请求到了真正的php文件。
测试方案:
使用chrome(其他任何浏览器都有)的dev工具,查看点击提交按钮后是否有请求发出,如果发出了说明,js已经ok了,如果没有发出请检查js报错。具体操作方法如下图:

img
可以看到我写的例子已经发出了,但是由于我没有定义php文件因此报错404,请检查你是否是同样的问题。

参考源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form>
    <input type="text" name="post_title" placeholder="文章标题">
    <br>
    <textarea name="post_content" id="post_content" class="form-control" rows="12" placeholder="文章内容"></textarea>
    <br>
    <select id="sort" name="blogsort">
        <option value="-1">选择分类</option>
        <option value="32">软件分享</option>
    </select>
    <br>
    <input type="button" id="user_post" name="submit" value="发布文章">
    <input type="hidden" name="action" value="post.new">
</form>
<script>
    $('#user_post').click(function () {
        //声明地址和数据变量中
        var url = '/user/reg.php';
        var data = {};
        //获取form表单下所有的属性名和属性值,存入数据变量data中
        $.each($('form').serializeArray(), function (i, v) {
            data[v['name']] = v['value']
        });

        //发送ajax请求,post方式,定义返回值格式为json(可删除)
        $.ajax({
            url: url,
            type: "post",
            data: data,
            dataType: "json",
            success: function (result) {
                console.log(result);
            }
        });
    });
</script>
</body>
</html>