javascript - PHP 和 jQuery 插入 MySQL

Question

我正在尝试使用 jQuery 将数据插入到 mySQL 中。该代码不会返回任何错误，也不会返回任何结果。请帮我解决这个问题。

$(document).ready(function() {
  $("#submit").click(function() {
    var data;
    var eid = 101;
    data = "eid=" + eid;
    for (i = 0; i <= 10; i++) {
      data += "&Text_" + (i + 1) + "=" + $("#Text_" + (i + 1)).val();
      data += "&Amount_" + (i + 1) + "=" + $("#Amount_" + (i + 1)).val();
    }
    $.ajax({
      type: "POST",
      url: "process.php",
      cache: false,
      data: data,
      dataType: "json",
      success: function(response) {
        if (!response.error) {
          $("#msg").addClass('alert-success').html(response.msg);
        } else {
          $("#msg").addClass('alert-danger').html(response.msg);
        }
      }
    });
  });
});

<tr>
  <td><input type="text" value="Allowance1 " name="Text[]" id="Text_1" /></td>
  <td><input type="text" value="1001.00" name="Amount[]" id="Amount_1" /></td>
</tr>
<tr>
  <td><input type="text" value="Allowance 2" name="Text[]" id="Text_2" /></td>
  <td><input type="text" value="1002.00" name="Amount[]" id="Amount_2" /></td>
</tr>
<tr>
  <td><input type="text" value="Allowance 3" name="Text[]" id="Text_3" /></td>
  <td><input type="text" value="1003.00" name="Amount[]" id="Amount_3" /></td>
</tr>

我添加 process.php 片段也是为了知道错误在哪里。

process.php

$eid=$_POST['eid'];
$length = sizeof($_POST["Text"]);   
$i=1;
while ($i<=$length){
    if(!empty($_POST['Text'][$i])) {
        $Text = $_POST['Text'][$i];
        $Amount =  $_POST['Amount'][$i]; 

        $msg = array('status' => !$error, 'msg' => 'Failed! updation-1');           
        if(!$error) {
            $sql = "UPDATE TblCustom SET Text='" . $Text . "', Amount='" . $Amount ."' WHERE ID='$eid'";                
            $status = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
            $msg = array('error' => $error, 'msg' => 'Success! updation : '. $sql );
        }
        else {
            $msg = array('error' => $error, 'msg' => 'Failed! updation-2 ');
        }

    }
    echo json_encode($msg);

}

谢谢

Answer 1

您有 3 个问题。

第一个问题和第二个问题是相关的。首先，您指定 dataType: 'json'，但以 application/x-www-form-urlencoded 格式传递数据。其次，您的 php 脚本期望数据采用以下格式:

$_POST = [
    'Text' => ['text_1', 'text_2', 'text_3'],
    'Amount' => ['amount_1', 'amount_2', 'amount_3']
];

虽然您的数据看起来像这样:

$_POST = [
    'Text_1' => 'text_1',
    'Text_2' => 'text_2'
    // and so on
];

此问题的单一修复如下:

$(document).ready(function() {
  $("#submit").click(function() {

    const data = {
      // we are grabbing all inputs with name=Text[] 
      // and mapping them to array containing their values.
      // The `...` is a spread operator introduced 
      // with the new js standard (ES6), 
      // that converts jQuery object to regular javascript
      // array of inputs.
      // you can do all of this with a for loop, but the map way
      // is prefered
      Text: [...$('input[name="Text[]"]')].map(input => input.value),
      Amount: [...$('input[name="Amount[]"]')].map(input => input.value)
    }

    $.ajax({
      type: "POST",
      url: "process.php",
      cache: false,
      data: data,
      dataType: "json",
      success: function(response) {
        if (!response.error) {
          $("#msg").addClass('alert-success').html(response.msg);
        } else {
          $("#msg").addClass('alert-danger').html(response.msg);
        }
      }
    });
  });
});

第三个问题是产生了SQL注入(inject)漏洞。这意味着一些坏人可以将 SQL 语句注入(inject)到 Text 变量中，然后您将其直接放入您的 sql 更新中，因此他可以做任何他想做的事(例如删除所有数据库)。

More on SQL Injection

解决方案很简单:使用 PDO 和 bindValue 方法。

$dsn = 'mysql:dbname=testdb;host=127.0.0.1';
$user = 'dbuser';
$password = 'dbpass';

try {
    $conn = new PDO($dsn, $user, $password);
} catch (PDOException $e) {
    // 500 means internal server error
    // that's handy information for the client-side
    http_send_status(500);
    echo json_encode([
        'error' => [
            'message' => 'Unable to connect to database'
        ]
    ]);
    exit;
}

$eid = $_POST['eid'];
$Text = $_POST['Text'][$i];
$Amount = $_POST['Amount'][$i];

$sql = "UPDATE TblCustom SET Text = :text, Amount = :amount WHERE ID = :id";
$stmt = $conn->prepare($sql);

$stmt->bindValue(':text', $Text);
$stmt->bindValue(':amount', $Amount);
$stmt->bindValue(':id', $eid);

if (!$stmt->execute()) {
    // 400 means something went wrong when updating
    // also a handy information for the client-side
    http_send_status(400);
    echo json_encode([
        'error' => [
            'message' => 'Unable to update'
        ]
    ]);
    exit;
}

// 204 measn everything went okay, and we don't return anything
http_send_status(204);
exit;

提示:如果您发送正确的状态代码，jQuery 可以让您处理如下错误:

$.ajax({
    // ...
    success: function(response) {
        // this code will be executed
        // only when status code == 2xx
    },
    error: function(response) {
        // this code will be executed
        // only when status code == 4xx | 5xx (if I remember correctly)
    },
    always: function(response) {
        // this code will be executed no matter what
        // as the name implies
    },
});

因此不需要额外的 if 语句。