将值从HTML传递到PHP文件

This is my first time posting here. I'm a beginner trying to design a tool that sends SMS using Twilio API.

I have the following:

  1. index.html containing the form to grab phone number and message with a submit button to post to the PHP file.
  2. send-sms.php that does the processing and sends the sms before displaying a success message on a separate page to the end user.

I want to use AJAX to do the back and forth between the HTML file and the PHP to keep the user on that HTML page.

Any tips to accomplish this?

My HTML is basic:

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

How do I use AJAX in the HTML above to communicate with the PHP and return success message back?

Here's some code from my PHP file:

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

To use Ajax, there is little change in both files.

First I suggest you to use jQuery Ajax from index.html and maintain the form sending Ajax request in submit action event. And in from file, the response is by echo and I suggest you to use a json_encode response.

Check out this sample code. Maybe it'll guide you to create a more appropriate version for your one...

<!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>

Code for server.php file

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