Question

我正在尝试使用Jquery Ajax提交一个简单的表单，但是在我单击“提交”后，该页面看起来需要重新加载，该表单的值显示在url字符串中，而post变量却从未使其进入php页面。看起来它像是GET之类的东西。

表格如下：

<form id = "textform">
Sent To: <input type="tel" name="number" id="name" placeholder="+1 999 999 9999" required>
<br>
<br>
Message:<textarea name="message" form="textform" placeholder="Enter text message here..." required></textarea>
<br>
<br>
<input type="submit" value="Submit">
</form>

Ajax代码如下：

<script>

    $("textform").on("submit",function(e){
        e.preventDefault();

         let number = $(this).find("[name='number']").val();
         let message = $(this).find("[name='message']").val();

        $.post('/aws/sendtext.php', { number: number, message : message}),

            function(returnedData){
                document.getElementById("result").innerHTML = returnedData;

            }).fail(function(){

        document.getElementById("result").innerHTML = "Failed";
    });

    });

</script>

不确定为什么数据不是来自表单，仍然将其视为GET。

更新-添加以下html标签的顺序：

<?php
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<form>
</form>
</div>
<div>
</div>
<script>
</script>
</body>
</html>

Answer 1

您没有在jQuery中捕获表单，因为您使用的是$("textform")而不是$("#textform")。这使得表单使用GET方法默认提交（因为您没有在<form>标记中声明它）。

所以，它看起来像这样：

$("#textform").on("submit",function(e){
    e.preventDefault();

     let number = $(this).find("[name='number']").val();
     let message = $(this).find("[name='message']").val();

     $.post('/aws/sendtext.php', { number: number, message : message})
        .done(function(returnedData){
            document.getElementById("result").innerHTML = returnedData;
        }).fail(function(){
            document.getElementById("result").innerHTML = "Failed";
        });

});

它应该可以正常工作

JSFiddle：http://jsfiddle.net/79t2bem1/8/

jQuery Ajax发布不携带变量

1 个答案: