时间戳

首页 > 解决方案 > 在不重新加载页面的情况下向选择列表添加新选项 - MODAL

php - 在不重新加载页面的情况下向选择列表添加新选项 - MODAL

问题描述

一旦用户通过引导模式添加了新选项，我正在尝试在选择列表中添加一个新选项而不刷新页面

我能够实现它，但我面临一个问题。我还需要在选项标签的 value 属性中附加 customer_id

选择标签

    <select class="form-control form-control-chosen add-customer-tag" id="invoice_customer_name" name="invoice_customer_name">
        <option style="display:none" disabled selected>Customer Name</option> 
        <option value="add-new-customer">Add New Customer</option>
<?php 
if(mysqli_num_rows($select_customer_query)>0){
    while($customer_result = mysqli_fetch_assoc($select_customer_query)) { 
?>
        <option value="<?php echo $customer_result['customer_id']; ?>"><?php echo $customer_result['customer_name']; ?></option>
<?php 
    }
} 
?>
    </select>

阿贾克斯调用

      $.ajax({
         url: 'includes/add-customer-modal.inc.php',
         type: 'POST',
         data: {customer_name:customer_name},
         success: function(add_customer_result){
             $('.error_message').html(add_customer_result);
             if($(add_customer_result).hasClass("alert-success")){
                 $("#invoice_customer_name").append("<option>" + customer_name + "</option>") // this would insert only the customer name in option, but I need to also insert the customer_id which is coming from database 
                 $("#invoice_customer_name").trigger("chosen:updated");
             }
         }
      });

add-customer-modal.inc.php

<?php 

session_start();

include 'db-connection.php';

   

   $user_id = $_SESSION['user_id'];
   $customer_name = mysqli_real_escape_string($connection, $_POST['customer_name']);

   
   if(empty($customer_name)){
       
       echo "<span class='alert alert-danger'>Customer name cannot be blank</span>";
       
   } else {
       
   $insert_customer = "insert into customer(user_id,customer_name) values('$user_id','$customer_name')";

   $inser_customer_query = mysqli_query($connection,$insert_customer)  or die(mysqli_error($connection));

   if($inser_customer_query){
       echo "<span class='alert alert-success'>Customer has been added</span>";
   }
   }

?>

而且我知道我的代码容易受到 sql 注入的影响。我将很快转向准备好的声明

我能够在选项列表中附加 customer_name 而无需重新加载页面，但不是 customer_id

标签： phpmysql

解决方案

哦，天哪，我们在该代码中有一点 SQL 注入问题所以......

首先，您需要使用准备好的参数化查询，然后我会将从此脚本返回的内容更改为始终为 JSON，这样您就可以在一个数据包中传递状态和有用信息

<?php 
session_start();
include 'db-connection.php';

$user_id = $_SESSION['user_id'];
   
$response = [];

if(empty($customer_name)){
    $response['status'] = 0;
    $response['status_msg'] = "Customer name cannot be blank";
} else {
      
    $sql = "insert into customer (user_id,customer_name) values(?,?)";
    $stmt = $connection->prepare($sql);
    $stmt->bind_param('ss', $_SESSION['user_id'], $_POST['customer_name']);
    $ok = $stmt->execute();
    if ( $ok ) {
        $response['status'] = 1;
        $response['status_msg'] = "Customer has been added";
        // get the id from the inserted customer
        $response['customer_id'] = $connection->insert_id;
    } else {
        // return some error code and message like above
    }
}
echo json_encode($response);
?>

现在在 javascript 中你有你需要的所有信息，你只需要把它放在你想要的地方

$.ajax({
        url: 'includes/add-customer-modal.inc.php',
        type: 'POST',
        data: {customer_name:customer_name},
        dataType: 'JSON',   // tell it to expect a JSON reply
                            // and will convert the reply to an js object
        success: function(response){
            if ( response.status == 0){
                // error
                $('.error_message').html(response.status_msg);
            } else {
                $("#invoice_customer_name")
                    .append("<option value='" + 
                        response.customer_id + "'>" + customer_name + "</option>") 
                 $("#invoice_customer_name").trigger("chosen:updated");
             }
        }
});

推荐阅读