Question

目标是一旦点击提交按钮，而不是发送到send.php，它将保留页面，我甚至不想重新加载页面。如果你们有另一种做法，那也很好。

我的Ajax代码

$("#sendtxt").click(function(e) {
        e.preventDefault();
        var phonenum = $("#phonenum").val();
        var provider = $("#provider").val();
        var message = $("#message").val();
        $.ajax({
            type : 'POST',
            data : dataString,
            url : 'send.php',
            success : function(data) {
                alert(data);
            }
        });
    });

我的表单代码

    <form name="reqform" action="" method="post">
        <h1>Phone Number:
        <input name="phonenum" id="phonenum" type="text" class="txtbox-style" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required/>
        <select name = "provider" id ="provider" class="txtbox-style" required>
            <option value="@sms.mycricket.com">Cricket Wireless</option>
        </select>
        <br/>
        Message:
        <input name="message" id="message" type="text" class="txtbox-style"/>
        <br/>
        How many times?
        <input name="amount" id="amount" type="number" min="1" max="20" class="txtbox-style" required/>
        <br />
        <input type="submit" id="sendtxt" name="sendtxt" class="btn-style" value="Start Sending" />
        </h1>
    </form>

我的send.php

<?php
 $to = $_POST["phonenum"];
 $provider = $_POST["provider"];
 $subject = 'Hi';
 $message = $_POST["message"];
 $headers = 'From: Hello' . phpversion();

 mail($to . $provider, $subject, $message, $headers);
?>

Answer 1

您的数据属性不正确，没有发送任何内容。你可以这样试试，这样可以工作：

您必须在页面中包含jQuery，您可以使用此行并将其放在脚本上方：

<script>
        $(document).ready(function(){
        $('input[name="phonenum"]').keyup(function(e) {
            if (/\D/g.test(this.value)) {
                // Filter non-digits from input value.
                this.value = this.value.replace(/\D/g, '');
            }
        });
        $("#sendtxt").click(function(e) {
            e.preventDefault();
            var phonenum = $("#phonenum").val();
            var provider = $("#provider").val();
            var message = $("#message").val();
            $.ajax({
                type : 'POST',
                data : {
                    provider : provider,
                    // ^key that appears in post
                    message : message,
                    // ^var you fetched before from the input
                    phonenum : phonenum
                },
                url : 'send.php',
                success : function(data) {
                    alert(data);
                    console.log('Success');

                },
                error : function(xhr, err) {
                    console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                    console.log("responseText: " + xhr.responseText);
                }
            });
        });
      });
    </script>

编辑：

检查您的控制台是否有错误（镀铬中的F12），如果有错误，它将如下所示，或类似：

enter image description here

如果ajax成功，至少会有“成功”

另一个编辑：

将表单从<h1>标记中删除，使用方式如下：

<h1>Phone Number:</h1>

并删除表单末尾的</h1> ...

Answer 2

我认为最好的方法是使用jquery $.post方法

$("form").submit(function(e) {
  e.preventDefault();

  $.post('send.php', $( this ).serialize()).done(function(data){
    alert(data);
  });

}

http://api.jquery.com/serialize/

http://api.jquery.com/jQuery.post/

**更新**

示例js fiddle：

http://jsfiddle.net/de71ju0r/1/

Answer 3

我更喜欢绑定表格submit事件（因为用户可能会点击焦点<input>元素，而不是通过点击<input type="submit">提交），此外还有更简单的数据收集的方法：

$("form").submit(function(e) {
    e.preventDefault();

    $.ajax({
        type : 'POST',
        data : $(this).serialize(),//Here we collect all entered data
        url : 'send.php',
        success : function(data) {
            alert(data);
        }
    });
});

提交表格后留在页面上

3 个答案: