jquery验证与php处理

ddrv8njm  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(297)

我想使用jquery验证我的表单,并使用php将其发送到我的数据库。
这就是我尝试过的:

<body>

    <form id="first_form" method="post" action="">
      <div>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name"></input>
      </div>
      <div>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name"></input>
      </div>
      <div>
        <label for="handphone">Handphone:</label>
        <input type="text" id="handphone" name="handphone"></input>
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>

<script>

    $(document).ready(function() {

      $('#first_form').submit(function(e) {
        e.preventDefault();
        var first_name = $('#first_name').val();
        var last_name = $('#last_name').val();
        var handphone = $('#handphone').val();

        $(".error").remove();

        if (first_name.length < 1) {
          $('#first_name').after('<span class="error">This field is required</span>');
          return false;
        }
        if (last_name.length < 1) {
          $('#last_name').after('<span class="error">This field is required</span>');
          return false;
        }
        if (handphone.length < 1) {
          $('#handphone').after('<span class="error">This field is required</span>');
          return false;
        } 

      });

    });

</script>

<?php   

    $first_name = "<script>var first_name = $('#first_name').val();</script>";
    $last_name = "<script>var first_name = $('#last_name').val();</script>";
    $handphone = "<script>var first_name = $('#handphone').val();</script>";

    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "test";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    $sql = "INSERT INTO vali (first_name, last_name, handphone)
    VALUES (first_name, last_name, handphone)";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn->close();
?>

</body>

如您所见,第一部分只是html和表单。
第二部分是我使用jquery进行验证的地方(这很有效)。
现在问题出现在php部分,它将数据作为空数据发送到我的数据库。
我的php代码背后的逻辑是,我获取jquery中设置的变量的值,然后将其更新到数据库中。但它更新的是空值。
我试图在jquery中返回false,但它对我无效。我能知道我做错什么了吗?

z2acfund

z2acfund1#

首先,您必须了解javascript在本例中是一种客户端脚本语言,php是一种服务器脚本语言。变量不能从javascript传递到php是 <script> 标签。
其次,我们有不同类型的请求; GET , POST , PUT , DELETE 等等。这我们可以通过php检查。一个窗体只能发送两种类型的请求,因为在我键入此答案时,get和post请求,这是您在窗体中设置的方法值。表单中的每个值集都可以在请求全局数组中访问,并且值的名称是键/标识符。 $_GET[] 如果你发送了get请求 $_POST[] 如果你发了邮件请求。
在上面的表单中,您的方法设置为post,这意味着所有值都可以在全局 $_POST[] .
当页面加载时,服务器脚本在客户端/html/css和文档使用的其他资源之前首先加载。
php有一个名为 isset() 它用于检查变量是否可用,不管它的值是多少,这对于表单验证非常有用。
如果文件中有执行逻辑/操作的php代码,建议您将它们放在文件的最上面,因为它不用于呈现文档/视图。
从您的代码,您应该编辑为

<?php

    if(isset($_POST['submit'])){ 
        // This block will only be executed when a submit button is triggered

       //Make your connection here, it is not a must but good practice to always make connection first in order to make it available everywhere. Ensure to check if connection was successful or not.

     $first_name = $_POST['first_name']; // this gives you the exact value you passed in the form.

       ... 
       // All you variables should be assigned using the above method

     //in the above assignation of variables, we didn't sanitize. mysqli has a method real_escape_string() which does that for us. Ensure to always sanitize and properly validate inputs you send to your DB

    //Sanitizing inputs
    $first_name = $con ->real_escape_string($first_name);

    // Do the above for other inputs, then you are good to perform an insert.

   $result = $conn->query($sql);
   if($result){
       //Record has been inserted, you can choose to redirect or do some other logic
   }else{ 
       //Record was not successfully inserted. Print your error if in development to get an insight to what went wrong
  }

  }

  $conn->close()

?>

相关问题