Question

这是我第一次问这里，我一直试图在其他问题中寻找类似的东西，但却找不到它。

我有一个包含邮政编码行（文本框）和状态行（文本框）的表单，现在，通过输入有效的美国邮政编码，javascript会自动填充状态框。表格本身有点长。我只显示我编辑过的相关代码，它之前是一个选择菜单（并且一切正常 - 数据输入数据库），我更改了它，因此不需要选择。

还有css文件，但它无关紧要（设计不是问题）

所以，这是我的HTML代码：

<html>
<head>some content here</head>
<body>
<form method="post" action="process.php">
<div class="title"><h2>my form title</h2></div><br>
<div align="center" class="element-name">
                             </span>
<span align="center" id="zipbox" class="nameFirst">
<input type="text" class="medium" pattern="[0-9]*" name="col2" id="col2" maxlength="5" placeholder="Type your ZIP code" onkeypress='validate(event)'required/>
                        </span>
<span align="center" id="zipbox2" class="nameLast">
<input type="text" class="medium" pattern="[0-9]*" name="col4" id="col4" maxlength="5" placeholder="Type your ZIP code" onkeypress='validate(event)'required/>
                </span></div>
<div align="center" class="element-name">
<span class="required"></span>
<span align="center" id="statebox" class="nameFirst">
<input type="text" class="medium" name="col1" id="col1" placeholder="" required />
<label class="subtitle">From</label>
                            </span>
<span align="center" id="statebox2" class="nameLast">
<input type="text" class="medium" name="col3" id="col3" placeholder="" required />
<label class="subtitle">To</label>
                               </span></div>
<p align="center"><input type="reset" value="Clear"></p>
</body>
</html>

一些javescript！

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(document).ready(function() {
    $("#col2").keyup(function() {
        var el = $(this);

        if (el.val().length === 5) {
            $.ajax({
                url: "http://zip.elevenbasetwo.com",
                cache: false,
                dataType: "json",
                type: "GET",
                data: "zip=" + el.val(),
                success: function(result, success) {
                    $("#city").val(result.city);
                    $("#col1").val(result.state);
                }
            });
        }
    });
});
    </script>
    <script>
        $(document).ready(function() {
    $("#col4").keyup(function() {
        var el = $(this);

        if (el.val().length === 5) {
            $.ajax({
                url: "http://zip.elevenbasetwo.com",
                cache: false,
                dataType: "json",
                type: "GET",
                data: "zip=" + el.val(),
                success: function(result, success) {
                    $("#city2").val(result.city);
                    $("#col3").val(result.state);
                }
            });
        }
    });
}); 
    </script>

和php代码来处理表单： - 这是13列，但我确定其他值是正确的。 - col0代表日期。

<?php
require_once('recaptchalib.php');
 $privatekey = "mycaptchakey";
 $resp = recaptcha_check_answer ($privatekey,
                                 $_SERVER["REMOTE_ADDR"],
                                 $_POST["recaptcha_challenge_field"],
                                 $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
   die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")");
        $process = FALSE;
 } else {

   // Your code here to handle a successful verification // Your code here to handle a successful verification
 }
define('CONST_SERVER_TIMEZONE', 'EDT');
define('CONST_SERVER_DATEFORMAT', 'YmdHis');
$current_date = date("Y-m-d H:i:s");


$col0 = $_POST['col0'];
$col1 = strtoupper($_POST['col1']);
$col2 = strtoupper($_POST['col2']);
$col3 = strtoupper($_POST['col3']);
$col4 = strtoupper($_POST['col4']);


if ( isset($col1) && isset($col2) isset($col3) && isset($col4) && $error == FALSE ) {
  $process = TRUE;
} else {
  $process = FALSE;
}
$mode = "mysql";{

define ('DB_USER', 'uname');
define ('DB_PASSWORD', 'pass');
define ('DB_HOST', 'host');
define ('DB_NAME', 'dbname');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) or die('Failure: ' . mysql_error() );
mysql_select_db(DB_NAME) or die ('Could not select database: ' . mysql_error() );

$query = "INSERT INTO mytable VALUES ('$current_date','$col1','$col2','$col3','$col4')";
$q = mysql_query($query);

if (!$q) {
  exit("<p>MySQL Insertion failure.</p>");
} else {
  mysql_close();
  //for testing only
  //echo "<p>MySQL Insertion Successful</p>";

}}

  header( 'Location: http://mywebsite.com/index.php' ); 
?>

我不确定我做得对，但这是我的 mytable结构：

1 - sid - int(11) AUTO_INCREMENT
2 - col0 - date
3 - col1 - text utf8_unicode_ci
4 - col2 - text utf8_unicode_ci
5 - col3 - text utf8_unicode_ci
6 - col4 - text utf8_unicode_ci
and so on up to 12 columons.

请帮忙！这里出了什么问题？

编辑：

非常感谢r3wt的有用信息，有很多东西需要修复，特别是当涉及到它的php部分时：）

好的，所以我能够修复插入。我错过了一个关键的价值 -

$query = "INSERT INTO mytable VALUES ('$current_date','$col1','$col2','$col3','$col4')";

应该是：

$query = "INSERT INTO mytable VALUES ('','$current_date','$col1','$col2','$col3','$col4')";

那是因为所有这些表单信息都进入了一个phpGrid表我有一个隐藏的列'sid'，它会自动填满。

我保证在下一次我将准备更多的知识：）

再次感谢。

Answer 1

在完成键入元素后等待直到第二个过去，然后提交ajax请求。

$(function(){ 
    $("#col4").keyup(function() {
        var col4val = $(this).val();
        clearTimeout(timer);
        timer = setTimeout(function(){fillLocation(col4val)}, 1000);
    });

    var timer = null;
    function fillLocation(value){
        $.get('http://zip.elevenbasetwo.com', {zip: value} , function(data){
            var result = JSON.parse(data);
            $("#city2").val(result.city);
            $("#col3").val(result.state);
        });
    }
});

另外，你的php代码被认为是不安全的，因为你使用的是mysql。

另外，我只是注意到一个明显的错误，你错过了和$ col2 isset和$ col3之间的运算符，检查你的ajax我保证它返回500内部服务器错误：

if ( isset($col1) && isset($col2) isset($col3) && isset($col4) && $error == FALSE ) {
  $process = TRUE;
} else {
  $process = FALSE;
}

另外，您的查询错误。很明显，你只是在这里复制和粘贴事物。请阅读INSERT语句中的mysql手册，并阅读php的mysqli和pdo扩展。

有效的mysql语句如下：

INSERT INTO mytable (column1,column2,column3) VALUES ('val1','val2','val3')

意识到这一点，你可以在php中构建语句，如此

$query = mysql_query("INSERT INTO mytable (column1,column2,column3) VALUES ('".$val1."','".$val2."','".$val3."')");

如果你继续使用mysql，你的网站会被黑客攻击，这只是时间问题，特别是因为你没有对你的任何数据进行消毒。请做出明智的选择，并使用mysqli或pdo与php连接数据库。

根据Dikei的要求，我将简要介绍一下使用mysqli编写的语句，以便学习使用安全的方法与数据库进行交互。

$mysqli = new mysqli('host','username','password','databasename');
$mysqli->set_charset("utf8");

$stmt = $mysqli->prepare("INSERT INTO mytable (column1,column2,column3) VALUES (?,?,?)");//bind your variables in the same order!

//s for a string, d for a double floating point integer, and i for unsigned int.
$stmt->bind_param('sss',$col1,$col2,$col3);
if($stmt->execute()) {
    $row = $stmt->insert_id ?: null;
    if(!empty($row))
    {
        //query success
    }else{
        //query failure
    }
    $stmt->close();
}
$mysqli->close();

如果您需要更多信息，我提供了一个更广泛的例子，使用面向对象的方法来处理mysqli（在答案的第二部分）：login session destroyed after refresh

无法在数据库中插入自动填充字段？

1 个答案: