php - 无需按键即可发送和截断变量（Ajax 和 PHP 之间的 onChange）

Question

在开始编写代码之前，我尝试解释我想要实现的目标：

我有一个输入，用户将使用带有键盘仿真的条形码阅读器编写代码（条形码），因此他将编写如下内容：123465789。

我想拿所有这些数字
截断它们，因为我只需要前 4 个字符：1234。
将此值传递给将检查哪个项目对应于该数字的数据库
添加到商品的“库存”编号。
清理表格
尽可能快地重复。

好的，现在我试图解释让我们从有趣的部分开始，我的代码：

文件 1：change.php

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
  <fieldset>
    <label for="troncami">Type Something:</label>
    <input id="troncami" type="text" />
  </fieldset>
</form>
<div id="risultatotroncato"></div>
<script>
$('#troncami').keyup(function(event) {              


            var str = $(this).serialize();                   
               $.ajax({            
               type: "GET", // the kind of data we are sending
               url: "troncare.php", // this is the file that processes the form data
               data: str, // this is our serialized data from the form
               success: function(msg){  // anything in this function runs when the data has been successfully processed

                    // this sets up our notification area for error / success messages
                    $("#risultatotroncato").ajaxComplete(function(event, request, settings)
                    { 
                        result = msg; // msg is defined in sendmail.php
                        $(this).html(result); // display the messages in the #note DIV                           
                    }); 
                $('input[name=troncami]').val(msg);
                }                    
             });                     



}).keydown(function(event) {
  if (event.which == 13) {
    event.preventDefault();
  }  
});

$('#other').click(function() {
  $('#target').keyup();
});</script>

</body>
</html>

文件 2：troncare.php

<?php
$risultatotroncato = 0;

$risultatotroncato = substr ($_GET['troncami'],0,4);

echo $risultatotroncato;
?>

显然它不起作用，我唯一能看到的是一个 NOTICE 错误：

注意：未定义索引：第 6 行 D:\Locali\xampp\htdocs\combobox\troncare.php 中的 troncami

所以我的问题是如何将输入中写入的值传递给 $_GET / $_POST 以便我能够使用 'troncare.php' 来“管理”它？我怎样才能尽可能快地做到这一点，以便用户能够在不停止的情况下使用条形码扫描仪“拍摄”，并将值几乎“实时”保存在数据库中？非常感谢！

（你可能已经知道我还在学习 PHP 和 AJAX 和 jQuery，所以在几年/几个月内，我将能够自己完成它，但是......我需要它尽快所以，你能帮我吗?)

score 1 · Accepted Answer

要回答您的主要问题，只需将您的 GET 参数添加到您在 ajax 调用中调用的 URL 的末尾。类似于以下内容：

$.ajax({             
    type: "GET", // the kind of data we are sending 
    url: "troncare.php?troncami=" + $('#troncami').val(), // this is the file that processes the form data 
    success: function(msg){  // anything in this function runs when the data has been successfully processed 
        // this sets up our notification area for error / success messages 
        $("#risultatotroncato").ajaxComplete(function(event, request, settings) {  
            result = msg; // msg is defined in sendmail.php 
            $(this).html(result); // display the messages in the #note DIV                            
        });  
        $('#troncami').val(msg); 
    }                     
});

或者您可以使用 $.ajax 调用的数据设置来传递键/值对：

$.ajax({             
    type: "GET", // the kind of data we are sending 
    url: "troncare.php", // this is the file that processes the form data 
    data: {"troncami" : $('#troncami').val()}, // this is our serialized data from the form 
    success: function(msg){  // anything in this function runs when the data has been successfully processed 
        // this sets up our notification area for error / success messages 
        $("#risultatotroncato").ajaxComplete(function(event, request, settings) {  
            result = msg; // msg is defined in sendmail.php 
            $(this).html(result); // display the messages in the #note DIV                            
        });  
        $('#troncami').val(msg); 
    }                     
});

请注意，我使用 '#troncami' 而不是 'input[name=troncami]' 作为输入的选择器。虽然看起来微不足道，但在大范围内，使用元素的 ID 作为选择器比使用过滤器样式选择器更有效。ID 在页面中应该是唯一的，以便在 DOM 中快速找到对象。如果您使用过滤器样式选择器（如 'input[name=troncami]'），则必须首先找到对象。您还应该考虑在 Ajax/JSon 调用中使用回调参数，因为这些参数有助于避免跨站脚本 (XSS)。

另一方面，我希望您将在 ajax 调用的接收端进行一些数据验证和清理。由于您的代码现在很容易受到注入攻击。至少在您的情况下，我会在 troncare.php 中使用类似的东西在查询或插入数据库之前验证输入值：

<?php
$risultatotroncato = 0;

if (isset($_GET['troncami']) && ctype_digit($_GET['troncami'])) {
    $risultatotroncato = substr ($_GET['troncami'],0,4);
    //echo or search the database here
}
else {
    //do whatever here if the value is blank or contains invalid characters
}
?>

这确保收到的值只能是数字（1234567890）。

更新： 如果我在这种情况下正确理解了您的情况，则 troncare.php 应接收的值应始终仅是有效的数字，因此 PHP 函数ctype_digit()将足以清理数据，并且仅在以下情况下才返回 true该值仅包含数字。在这种情况下，这已经足够净化了。如果您允许字母或数字，还有其他几个ctype 函数这可以提供帮助。如果数据是非标准类型，您可以使用使用模式匹配的 preg_match。在所有其他情况下，通常有一个与您的数据库类型相匹配的 PHP 函数来清理数据。例如，如果您使用 MySQL，则有一个名为 mysqli_real_escape_string() 和 mysql_real_escape_string() 的 PHP 函数在以任何方式与数据库一起使用数据之前清理数据。我不会在这个部门重新发明轮子，但是关于 SO（以及网络上的其他地方）有很多很好的问题可以处理这个主题，例如：这里

php - 无需按键即可发送和截断变量（Ajax 和 PHP 之间的 onChange）

1 回答 1

Related

Reference