Javascript 使用PHP和AJAX处理输入

我一直在想这个任务，我真的需要帮助。我真的很接近，但我被困在数据库部分。这是任务：

建立一个小的电话簿应用程序，允许你创建和删除人

前端应该是一个简单的页面，带有创建新人的界面。这个界面应该有三个字段，名字，姓氏，电话号码和一个提交按钮。还必须有一份人员名单。列表应按姓氏升序排列，还应包含删除用户的删除按钮。删除按钮应位于列表的右侧，列表应根据奇数/偶数交替使用背景色

Javascript应该处理基本表单验证，所有保存/删除都应该通过AJAX完成

PHP应该处理检索所有人员、从数据库中添加和删除人员的操作

这是我到目前为止对HTML部分的了解：

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

有人能告诉我如何使用PHP和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>

$（文档）.ready（函数（）{
//#####将添加记录Ajax请求发送到response.php#########
$（“#表单提交”）。单击（函数（e）{
e、 预防默认值（）；
if（$（“#firstnameText”）.val（）=''）{
警报（“请输入一些文本！”）；
返回false；
}
$（“#FormSubmit”）.hide（）；//隐藏提交按钮
$（“#加载图像”）.show（）；//显示加载图像
var myData='firstname_txt='+$（“#firstnameText”）.val（）；//构建post数据结构
jQuery.ajax({
键入：“POST”，//HTTP方法POST或GET
url:“response.php”，//在哪里进行Ajax调用
数据类型：“text”，//数据类型、HTML、json等。
data:myData，//表单变量
成功：功能（响应）{
$（“#响应”）。追加（响应）；
$（“#firstnameText”）.val（“”）；//成功时为空文本字段
$（“#FormSubmit”）.show（）；//显示提交按钮
$（“#加载图像”）.hide（）；//隐藏加载图像
},
错误：函数（xhr、ajaxOptions、thrownError）{
$（“#FormSubmit”）.show（）；//显示提交按钮
$（“#加载图像”）.hide（）；//隐藏加载图像
警报（thrownError）；
}
});
});
//#####将删除Ajax请求发送到response.php#########
$（“正文”）。在（“单击”按钮上，“响应.del_按钮”，功能（e）{
e、 预防默认值（）；
var clickedID=this.id.split（'-'）；//split-id-string（split与PHP分解一样工作）
var dbnumberrid=单击edid[1]；//并从数组中获取数字
var myData='recordToDelete='+DbNumberID；//构建post数据结构
$（'#firstname.'+DbNumberID）.addClass（“sel”）；//通过添加类更改此元素的背景
$（this）.hide（）；//隐藏当前单击的删除按钮
jQuery.ajax({
键入：“POST”，//HTTP方法POST或GET
url:“response.php”，//在哪里进行Ajax调用
数据类型：“text”，//数据类型、HTML、json等。
data:myData，//表单变量
成功：功能（响应）{
//成功后，隐藏用户要删除的元素。
$（'#firstname'+dbnumberrid）.fadeOut（）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
//出现错误时，我们会提醒用户
警报（thrownError）；
}
});
});
});

在response.php中：

$firstname = $_POST['firstname_txt'];

---

看来你现在走对了路

您可以在php端访问post值，如下所示：

<?php
  $firstname = $_POST["firstname_txt"];

  echo $firstname;

  //do database stuff with $firstname.... etc.
?>

---

你能给我们展示一些你已经尝试过的javascript吗？该代码将帮助我们帮助您。这是我到目前为止尝试使用的名字，该名字在某种程度上起作用，但我似乎无法让其他名字正常工作。^@riot您能告诉我们您的问题到底是什么吗？欢迎使用stackoverflow。为了提高您的阅读能力，请尝试添加相关解释。看见

data: {
  'firstname_txt': $("#firstnameText").val()
},