Javascript 从响应和数据获取PHP jQuery aJax

不确定我遗漏了什么，但我在尝试构建代码时遇到了一些问题

• 数据未从表单传递到数据库（空白条目）
• 它也将转到repsonse.php，而不是停留在表单页面上
• 如何将response.php中的成功和错误响应传递回要在前端表单上显示的表单
• 最后是添加两次数据（空白条目，但两次相同）

HTML

SCRIPTS.JS

// add product
    $('#action_add_product').click(function(){
        var $btn = $(this).button('loading');

        $.ajax({

            url: 'response.php',
            type: 'POST',
            data: $('#add_product').serialize(),
            success: function(result){
                $('#response .message').html('Product has been added successfully!');
                $('#response').fadeIn();
                $btn.button('reset');
            }

        });
    });

---

您好，您面临的问题是因为您的数据被发布了两次。因为您使用的是ajax，所以不必给出表单操作。您可以将其替换为“#”符号。 您还可以使用jquery prevent default函数来防止表单的默认过帐

您的echo in Response.php将仅作为对ajax调用的响应，因此即使未执行数据库查询，结果也将是您已成功创建字段

还要检查序列化值是否正确

只需替换

$data = $_POST['serialize']; // serialize the data
$product_name = $data['product_name'];
$product_desc = $data['product_desc'];
$product_price = $data['product_price'];

这些

//$data = $_POST['serialize']; 
$product_name = $_POST['product_name'];
$product_desc = $_POST['product_desc'];
$product_price = $_POST['product_price'];

---

单击#操作(添加)产品按钮时，您的表单正在提交。如果您想使用ajax，可以：

使用href='.'将您的#操作#添加#产品元素从

按钮

更改为

a

——这将阻止您提交表单

更改js代码<代码>$（'#操作>添加产品'）。单击（函数（）{如下：

$（'#添加产品'）。提交（函数（e）{
e、 preventDefault（）；

数据未从表单传递到数据库（空白条目）

表单输入中缺少

name

属性。正在调试

$（“#添加_产品”）的输出。serialize（）

将验证这一点

它也将转到repsonse.php，而不是停留在表单页面上

您可以将表单操作设置为

#

（正如Harigovind指出的那样），我更喜欢绑定表单的

提交

事件，并阻止表单的默认执行。这也解决了人们不按按钮（触发

单击

事件），而是使用

输入

键的问题：

$("#add_product").on("submit", function(e) {
   e.preventDefault(); // prevent default POST of form
   $.ajax({
      // etc
   });
});

---

jsIDLE:

您缺少字段的

name

属性。任何等同于$\u GET或$\u POST的ajax请求都需要这些字段。

我猜您缺少表单输入中的

name

属性。您可以在发布之前检查序列化的表单数据：

控制台.log（$（'add\u product'）.serialize（））

？我添加了名称，但没有修复它。我会做一个日志，看看结果如何。action=add\u product&product\u name=&product\u desc=&product\u price=对添加了两次的内容进行排序，并移动到response.php文件，所以2个问题已排序。谢谢，我如何传回响应？有什么想法吗？谢谢你的帮助。很好，这似乎完成了任务k！你知道我如何用html（“结果”）将成功和错误消息传回@james change your html（“产品已成功添加”）。这将为您提供您在php中作为您的html回应的消息。别忘了接受这一回答，因为它解决了您的错误…我已经按照您所说的做了，提交会更好。您是对的。我添加了名称属性，但它们似乎仍然无法通过，并且不确定原因。操作=添加产品和产品名称=&product\u描述=&product\u价格=不确定我添加了一个JSFIDLE链接，在这里我可以看到正确序列化的值

//$data = $_POST['serialize']; 
$product_name = $_POST['product_name'];
$product_desc = $_POST['product_desc'];
$product_price = $_POST['product_price'];

$("#add_product").on("submit", function(e) {
   e.preventDefault(); // prevent default POST of form
   $.ajax({
      // etc
   });
});