Question

我目前正在使用短信服务twilio向用户发送详细信息。表格在提交时使用操作和发布方法提交并提交。我想将其更改为AJAX提交的表单。有什么想法吗？我已经在下面列出了一些代码，目前的工作原理如下：

****联系表格****

<form action="sendsms.php" method="post" id="sms">
     <input type="text" name="name" id="name" value="Sam"/>
     <input type="phone" name="phone" id="phone" value="0000000000"/>
     <textarea name="message" style="width: 500px; height: 300px;"> Test Message</textarea>
        <input type='submit' value='submit'/>
    </form>

**** PHP ****

<?php
    if($_POST)
    {

        require "Services/Twilio.php";


        $AccountSid = "ACaa1c********";
        $AuthToken = "ae6c269********";


        $client = new Services_Twilio($AccountSid, $AuthToken);

        $from = '+44**********';
        $name = $_POST['name'];
        $phone = $_POST['phone'];

        // Send a new outgoing SMS */
        $body = htmlspecialchars($_POST['message'].$name );
        $client->account->sms_messages->create($from, $phone, $body );
        echo "Sent message to $name";
    }
?>

**** AJAX ****

$('#sms').submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();
    //get input field values
    var user_name       = $('input[name=name]').val(); 
    var user_phone      = $('input[name=phone]').val();
    var user_message    = $('textarea[name=message]').val();

    var proceed = true;

    if(proceed) 
               {
                 //data to be sent to server
                 post_data = {'userName':user_name, 'userPhone':user_phone, 'userMessage':user_message};

                 //Ajax post data to server
                 $.post('sendsms.php', post_data, function(data){  

                     alert(data);


                        }).fail(function(err) {  //load any error data
                            $("body").hide().html('<div class="error">'+err.statusText+'</div>').slideDown();
                        });
                    }          
                    return true;
                });

Answer 1

 $(function(){
                $('#sms').submit(function(e){
                    e.preventDefault();

                    var d = $(this).serialize();

                    $.ajax({
                        type        :       'post',
                        url         :       'sendsms.php',
                        data        :       d
                    }).done(function(data){
                       alert('done');
                    }).fail(function(x,y,z){
                        alert('error');
                    });

                });
            });

很容易。

Answer 2

利用jquery直接从表单中获取操作和数据，attr('action')和serialize()：

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

        $.post($(this).attr('action'), $(this).serialize(), function(data){
            console.log(data); //alert(data);
        }).fail(function(err){
            console.log(err); //alert(err);
        });
    });
});

如上所述，警报是一种糟糕的调试方法。所有现代浏览器都有一个javascript控制台（在谷歌浏览器中按Ctrl + Shift + J，或右键单击＆gt;检查元素以显示完整的开发工具）。 console.log()会将您的数据发送到控制台。其他javascript错误也会显示。

将PHP联系表单转换为AJAX

2 个答案: