使用PHP和AJAX处理输入

Question

I have been trying to figure out this assignment and I really need help. I am really close but but I am stuck on the database part. This is the assignment:

Build a small phone book app that will allow you to create and delete people.

The front end should be a simple page with an interface to create a new person. The interface should have three fields, first name, last name, and phone number plus a submit button. There must also be a list of people. The list should be ordered by last name in ascending order, it should also contain a delete button that removes the user. The delete button should be on the right side of the list, and the list should alternate background colors depending on odd/even.

Javascript should handle basic form validation and all saves/deletes should be done via AJAX.

PHP should handle retrieving all people, adding and removing people from a database.

This is what I have so far for the HTML portion:

<div class="contact_wrapper">
    <ul id="responds">
        <?php
        //close db connection
        $mysqli->close();
        ?>
    </ul>

    <div class="form_style">
        <input name="firstname_txt" id="firstnameText" cols="45" rows="5" placeholder="First Name" required></input>
    </div>

    <div class="form_style2">
        <input name="lastname_txt" id="lastnameText" cols="45" rows="5" placeholder="Last Name" required></input>
    </div>

    <div class="form_style3">
        <input name="phonenumber_txt" id="phonenumberText" cols="45" rows="5" placeholder="Phone Number" required></input>
    </div>

    <input type="submit" id="FormSubmit"></input>

    <img src="images/loading.gif" id="LoadingImage" style="display:none" />
</div>

Could someone show me how an input would be handled using PHP and AJAX/jQuery?

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

    //##### send add record Ajax request to response.php #########
    $("#FormSubmit").click(function(e) {
      e.preventDefault();
      if ($("#firstnameText").val() === '') {
        alert("Please enter some text!");
        return false;
      }

      $("#FormSubmit").hide(); //hide submit button
      $("#LoadingImage").show(); //show loading image

      var myData = 'firstname_txt=' + $("#firstnameText").val(); //build a post data structure
      jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "response.php", //Where to make Ajax calls
        dataType: "text", // Data type, HTML, json etc.
        data: myData, //Form variables
        success: function(response) {
          $("#responds").append(response);
          $("#firstnameText").val(''); //empty text field on successful
          $("#FormSubmit").show(); //show submit button
          $("#LoadingImage").hide(); //hide loading image

        },
        error: function(xhr, ajaxOptions, thrownError) {
          $("#FormSubmit").show(); //show submit button
          $("#LoadingImage").hide(); //hide loading image
          alert(thrownError);
        }
      });

    });

    //##### Send delete Ajax request to response.php #########
    $("body").on("click", "#responds .del_button", function(e) {
      e.preventDefault();
      var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
      var DbNumberID = clickedID[1]; //and get number from array
      var myData = 'recordToDelete=' + DbNumberID; //build a post data structure

      $('#firstname_' + DbNumberID).addClass("sel"); //change background of this element by adding class
      $(this).hide(); //hide currently clicked delete button

      jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "response.php", //Where to make Ajax calls
        dataType: "text", // Data type, HTML, json etc.
        data: myData, //Form variables
        success: function(response) {
          //on success, hide  element user wants to delete.
          $('#firstname_' + DbNumberID).fadeOut();
        },
        error: function(xhr, ajaxOptions, thrownError) {
          //On error, we alert user
          alert(thrownError);
        }
      });
    });

  });
</script>

Answer 1

in response.php:

$firstname = $_POST['firstname_txt'];