Question

这是我第一次在这里发帖。我是初学者，试图设计一个使用Twilio API发送短信的工具。

我有以下内容：

index.html包含获取电话号码的表单和带有提交按钮的消息，以发布到PHP文件。
send-sms.php执行处理并在单独页面上向最终用户显示成功消息之前发送短信。

我想使用AJAX在HTML文件和PHP之间来回切换，以使用户保持在该HTML页面上。

完成此任务的任何提示？

我的HTML是基本的：

    <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<div class="container">
<form id="contact" action="sendsms.php" method="post">
<h3>Send SMS Tester</h3>
<h4>by <a href="mailto:blah@gmail.com">Uncle Dan</a></h4>
    <fieldset>
      <input placeholder="To Phone Number (format: +1555123456)" name="phone" type="tel" tabindex="3" required>
    </fieldset>

    <fieldset>
      <textarea placeholder="Message Body (max 160 chars)" name="body" tabindex="5" required></textarea>
    </fieldset>

    <fieldset>
      <input name="submit" type="submit" id="contact-submit" value="Send message" data-submit="...Sending">
    </fieldset>

    <!--<input type="submit" value="Send message" />-->
</form>
</div>
</html>

如何在上面的HTML中使用AJAX与PHP通信并返回成功消息？

以下是我的PHP文件中的一些代码：

require __DIR__ . '/twilio-php-master/Twilio/autoload.php';

// Use the REST API Client to make requests to the Twilio REST API
use Twilio\Rest\Client;

// Credentials to connect to Twilio
$accountSid = 'AC';
$authToken = 'xxx';

// Create a connection to Twilio's API with credentials
$client = new Client($accountSid, $authToken);

// Actually send the number. This is where the magic happens! *** This needs rework! Use the bookmarked Twilio article to change.

//$client = new Services_Twilio($account_sid, $auth_token);
$message = $client->messages->create(
//'to' => $_POST['phone'],
$_POST['phone'],
    array(
    'from' => '+1555123456',
    'body' => $_POST['body']));

if($message->sid): 
// This content will appear conditionally when the form is submitted
?>

<p>Up, up and awaaaay! Your SMS has been sent :)</p>

<?php endif; ?>

Answer 1

要使用Ajax，两个文件几乎没有变化。

首先，我建议您使用index.html中的jQuery Ajax，并在提交操作事件中维护发送Ajax请求的表单。在文件中，响应是echo，我建议你使用json_encode响应。

Answer 2

查看此示例代码。也许它会引导你为你的版本创建一个更合适的版本......

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">
        $( document ).ready(function() {

            $( "#contact" ).submit(function( event ) {
                var phoneNumber = $('#phone').val();
                var body = $('#body').val();

                console.log('phoneNumber',phoneNumber);
                console.log('body',body);

                // Jquery code for making AJAX call to server side script
                $.ajax({
                    method: "POST",
                    url: "server.php", // use your server side PHP script file name at here
                    data: { phoneNumber: phoneNumber, body: body }
                })
                .done(function( response ) {
                    alert( "Response Message from server: " + response );
                });

                return false;
            });

        });
    </script>
</head>
<body>
    <form id="contact" action="sendsms.php" method="post">
        <h3>Send SMS Tester</h3>
        <h4>by <a href="mailto:blah@gmail.com">Uncle Dan</a></h4>

        <fieldset>
            <input placeholder="To Phone Number (format: +1555123456)" id="phone" name="phone" type="tel" tabindex="3" required>
        </fieldset>

        <fieldset>
            <textarea placeholder="Message Body (max 160 chars)" id="body" name="body" tabindex="5" required></textarea>
        </fieldset>

        <fieldset>
            <input name="submit" type="submit" id="contact-submit" value="Send message" data-submit="...Sending">
        </fieldset>
    </form>
</body>
</html>

server.php文件的代码

// Access POST data 
$phoneNumber = $_POST['phoneNumber'];
$body = $_POST['body'];

将值从HTML传递到PHP文件

2 个答案: