从 HTML 到 PHP 文件来回传递值答案

【问题标题】：Passing values back and forth from HTML to PHP file从 HTML 到 PHP 文件来回传递值
【发布时间】：2017-02-16 06:36:43
【问题描述】：

这是我第一次在这里发帖。我是一名初学者，正在尝试设计一个使用 Twilio API 发送 SMS 的工具。

我有以下几点：

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; ?>

【问题讨论】：

如果您想使用 ajax，请阅读有关它的教程（实际上有数以千计的教程，如果您只是 google 的话）并试一试。当您遇到困难时，请回来，向我们展示您的尝试，我们可以为您提供帮助。 SO 既不是教程网站，也不是免费的编码服务。

标签： php html ajax sms twilio

【解决方案1】：

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

<!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'];

【讨论】：

感谢您给我一个起点。我真的很感激！
嗨，丹，如果您觉得我的回答解决了您的问题，您可以接受。

【解决方案2】：

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

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

【讨论】：

谢谢@Álvaro-touzón - 我会试一试！