试图将值从JS发送到PHP - JQuery的$ .ajax()方法不起作用

时间:2016-05-06 18:05:22

标签: javascript php jquery ajax post

我希望在提交PHP表单时执行JS函数,并且从该函数,我想要返回一个值(基于用户的输入)到PHP,我喜欢这里回应它。

这是一个SSCCE。在实际代码中,不仅仅是回显值,而且值是JSON对象。

以下是我的代码。 问题是$.ajax();部分无效。 alert(name);之后浏览器中没有任何操作。 为什么这不正常?我该如何解决这个问题?

来自index.php:

<form id="form">
  Name:
  <input id="name" type="text" />
  <input type="Submit" value="Go" />
</form>

来自scripts.js:

$(document).ready(function() {

    $("#form").submit(function(event) {
        event.preventDefault();

        var name = $("#name").val();
        alert(name);

        $.ajax({
            type:'POST',
            url:'echo.php',
            data: {
                nameEntered : name
            }
        });

    });

});

echo.php:

<?php  
if (    isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])    ) {
    echo $_POST["nameEntered"];
} else {
    echo '$_POST["nameEntered"] is not set.';
}
?>

编辑:

控制台:

enter image description here

网络:

enter image description here

编辑2:

将以下内容添加到$.ajax()

,
success: function(){
    alert("success");
},
error : function(){ 
    alert("error");
}

我收到一条提示success的提示,但浏览器从不指示echo.php = s

编辑3:

警告说success后,?会添加到浏览器中的网址中。最初,网址为http://localhost/Test12/index.php,并且已更改为http://localhost/Test12/index.php?

6 个答案:

答案 0 :(得分:2)

这种方式应该显示响应。

<强> JAVASCRIPT

$("#form").submit(function(event) {
    event.preventDefault();

    var name = $("#name").val();
    //alert(name);

    $.ajax({
        type:'POST',
        url:'http://localhost/Test12/echo.php',
        data: {
            nameEntered : name
        },
        success : function(data){
            console.log(JSON.parse(data));
        },
        error : function(error){
            console.log('erro', error);
        }
    });

});

<强> PHP

<?php  

if (isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])) {
    $name = array("nome" => $_POST["nameEntered"]);
    echo json_encode($name);
} else {
    echo '$_POST["nameEntered"] is not set.';
}
?>

答案 1 :(得分:1)

尝试删除document.ready()或代替.submit使用.on('submit',function(e){});或添加绝对路径'/page.php'

答案 2 :(得分:1)

我认为除了显示结果的成功调用之外,您还需要在提交功能中添加“event”作为参数

答案 3 :(得分:1)

这给你带来了什么:

$.ajax({
    type:'POST',
    url:'echo.php',
    data: {
        nameEntered : name
    },
    success: function(recd){   // <-------
        alert(recd);           // <-------
    },
    error : function(){ 
        alert("error");
    }
});

答案 4 :(得分:1)

作为测试,请将echo.php替换为:

<?php  
    echo 'Incoming = ' .$_POST["nameEntered"]. "/r/n";

    if (isset($_POST["nameEntered"]) && !empty($_POST["nameEntered"])) {
        echo 'Here 01';
    } else {
        echo 'Here 02';
    }
?>

答案 5 :(得分:0)

您正在调用event.preventDefault(),但您未能将该事件添加到您的回调参数中......因此您实际上并没有停止该表单提交。这就是你在地址栏中看到问号的原因。

尝试:

function(e){
    e.preventDefault();
};