Question

我试图通过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>

Jquery代码：

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

PHP代码：

<?php

echo "Just testing functionality!":

?>

我需要帮助才能找出此代码的错误。

Answer 1

在您的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.
        });
    });
});

现在，有了这个，你的代码将在没有语法错误的情况下执行，但是你的成功回调不会被调用，因为你有dataType:'json'，所以php的返回值必须是有效的json，否则会有一个解析错误并且不会调用您的成功回调。

要检测到这一点，您需要使用error回调。这是一个更完整的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中使用json_encode()。
例如，尝试这在您的edit.php文件中 -

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

Answer 2

将return 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
});

Answer 3

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

http://malsup.com/jquery/form/

选中此项，并查看示例，您将在其中找到简单明了的示例。

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

希望这会有所帮助。

Answer 4

试试这段代码

 $(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();
        };

Answer 5

除了Kamehameha和kanishka-panamaldeniya写下的内容之外，你可以通过这种方式实现目标：

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

和

type:'post'

Answer 6

如上所述，您需要在事件对象上调用preventDeafult函数;此功能可防止submit操作发生。

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

作为一种优化形式，您还可以在ajax调用中引用$(this)，而不是使用$(#edit).serialize()进行新的DOM遍历。

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

然后是的，正如@Kamehameha所说，你需要从edit.php返回有效的json，所以

//edit.php
echo json_encode("Just testing functionality!");

使用jquery发布多个变量

6 个答案: