Javascript 使用jquery发布多个变量

我试图通过jquery将多个变量从一个php文件传递到另一个php文件，但什么都没有发生，我也可以看到javascript代码中存在错误，但我无法找出真正的错误

HTML代码：

<form id="edit" action="" method="POST">
    <input type="text" name="name" value="wael">
    <input type="text" name="phone" value="0103941454">
    <input type="text" name="address" value="address">
    <input type="submit" name="submit" value="Send">
</form>
<div style="display:none;" id="feedback"></div>

PHP代码：

<?php

echo "Just testing functionality!":

?>

---

请帮助我找出此代码的错误。

添加

返回false

到

.submit（）

函数的末尾，以防止表单提交

 $('#edit').submit(function(){
    $.ajax({
        type:'POST',
        url:'edit.php',
        dataType:'json',
        data:$('#edit').serialize(),
        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        }
    });
    return false; //here. otherwise the form will submit to its self not edit.php
});

---

添加

返回false

到

.submit（）

函数的末尾，以防止表单提交

 $('#edit').submit(function(){
    $.ajax({
        type:'POST',
        url:'edit.php',
        dataType:'json',
        data:$('#edit').serialize(),
        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        }
    });
    return false; //here. otherwise the form will submit to its self not edit.php
});

---

对于发布表单数据，最好使用JQuery表单插件，它提供了发送数据和接收响应的简单方法

检查这一点，并检查您将发现简单和简单的例子的例子

此外，使用此插件，您将不需要在jquery中获取表单数据或使用jquery ajax函数。提交时，数据将由ajax直接发布到表单操作

---

希望这会有所帮助

对于发布表单数据，最好使用JQuery表单插件，它提供了发送数据和接收响应的简单方法

检查这一点，并检查您将发现简单和简单的例子的例子

此外，使用此插件，您将不需要在jquery中获取表单数据或使用jquery ajax函数。提交时，数据将由ajax直接发布到表单操作

---

希望这会有所帮助

在JS代码中，您必须停止提交表单，使用

e.preventDefault（）

，并且在成功回调结束时出现语法错误。试试这个-

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
      //^^^^^^^^^^^^^^^^^^^ Added this.
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
           //^ There was a comma here. Remove it.
        });
    });
});

现在，这样，代码将在没有语法错误的情况下执行，但不会调用成功回调，因为您有

数据类型：'json'

，因此php的返回值必须是有效的json，否则将出现解析错误，并且不会调用成功回调。

要检测到这一点，您需要使用

错误

回调。这是一个更完整的AJAX调用-

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                console.log("success");
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            },
            error: function( jqXHR,textStatus,errorThrown ){
                console.log(textStatus);
            }
        });
    });
});

对于返回无效JSON的PHP代码，将抛出解析错误。
如果要返回JSON数据，请尝试在PHP中使用。
例如，在

edit.PHP

文件中尝试此操作-

<?php
    header("Content-Type: application/json");
    echo json_encode("Just testing functionality!");
?>

---

在JS代码中，您必须停止提交表单，使用

e.preventDefault（）

，成功回调结束时出现语法错误。试试这个-

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
      //^^^^^^^^^^^^^^^^^^^ Added this.
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
           //^ There was a comma here. Remove it.
        });
    });
});

现在，这样，代码将在没有语法错误的情况下执行，但不会调用成功回调，因为您有

数据类型：'json'

，因此php的返回值必须是有效的json，否则将出现解析错误，并且不会调用成功回调。

要检测到这一点，您需要使用

错误

回调。这是一个更完整的AJAX调用-

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                console.log("success");
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            },
            error: function( jqXHR,textStatus,errorThrown ){
                console.log(textStatus);
            }
        });
    });
});

对于返回无效JSON的PHP代码，将抛出解析错误。
如果要返回JSON数据，请尝试在PHP中使用。
例如，在

edit.PHP

文件中尝试此操作-

<?php
    header("Content-Type: application/json");
    echo json_encode("Just testing functionality!");
?>

试试这段代码

 $(document).ready(function(){
    $('#edit').submit(function(event){

        event.preventDefault();

        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
        });
    });
});

我在这里做了两个改变

1. event.preventDefault();

用于防止默认操作

2. success:function(data) {
                    $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
                }

而不是

        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        };

试试这个代码

 $(document).ready(function(){
    $('#edit').submit(function(event){

        event.preventDefault();

        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
        });
    });
});

我在这里做了两个改变

1. event.preventDefault();

用于防止默认操作

2. success:function(data) {
                    $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
                }

而不是

        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        };

---

除了Kamehameha和kanishka panamaldeniya写下的内容外，您还可以通过以下方式实现您的目标：

 data: { name:wael ,phone:0103941454, address:address }

及

---

除了Kamehameha和kanishka panamaldeniya写下的内容外，您还可以通过以下方式实现您的目标：

 data: { name:wael ,phone:0103941454, address:address }

及

---

如上所述，您需要在事件对象上调用

preventedafult

函数；此功能可防止发生

submit

操作

$('#edit').submit(function(event) {
    event.preventDefault();

作为一种优化形式，您还可以在ajax调用中引用

$（this）

，而不是使用

$（#edit）.serialize（）

执行新的DOM遍历

---

如上所述，您需要在事件对象上调用

preventedafult

函数；此功能可防止发生

submit

操作

$('#edit').submit(function(event) {
    event.preventDefault();

作为优化的一种形式，您还可以在ajax调用中引用

$（this）

，而不是使用

$（\edit.serialize（）

）执行新的DOM遍历

---

最好使用

event.preventDefault（）

而不是

return false

最好使用

event.preventDefault（）

而不是

return false