如何通过 ajax 使用 onfocus() 函数将值保存到 sql 数据库答案

【问题标题】：How to save a value to an sql databse using an onfocus() function via ajax如何通过 ajax 使用 onfocus() 函数将值保存到 sql 数据库
【发布时间】：2014-03-08 08:39:05
【问题描述】：

基本上我要做的是当用户关注另一个输入时，将表单中的一个值保存到 sql 数据库中。我想最好的方法是使用 ajax。（希望这是有道理的！）这是我的代码：

脚本：

   function storeLocation() {
       location = $("#location").val();
       $.ajax({
           url: 'storeLocation.php',
           type: 'post',
           data: 'feed_id=' + location,
           success: function (result) {}
       });

   }

html：

<form id="profile" action = "index.php" method="post" name="profile">
    <input type="text" name="location" id="location" autocomplete="off">
    <input type="submit" value="submit">
</form>

以及 StoreLocation.php 代码：

<?php 
require 'core.php';
require 'connect.php';

$city = $_POST['feed_id'];
$idPerson = getfield('idPerson','person');

$query = "UPDATE table SET idLocation = '$idLocation' 
WHERE idPerson = '$idPerson'"; 
$query_run = mysql_query($query);
?>

目前，此代码只是将用户移动到带有变量 $city 的新网址，例如： www.example.com/london。

任何帮助都会很棒，因为我已经坚持了太久了:)

请求的额外代码：

    $term=$_GET["term"];


    $query=mysql_query("SELECT * FROM venue WHERE name like '%".$term."%'
     ORDER BY name ");
     $json=array();

        while($name=mysql_fetch_array($query)){
             $json[]=array(
                'value'=> $name["name"],
                'label'=>$name["name"]
                    );
              }

     echo json_encode($json);

    ?>

【问题讨论】：

你试过onblur属性吗？ blur 事件在元素失去焦点时触发。 <input type="text" name="location" id="location" autocomplete="off" onblur="storeLocation();">
感谢您的回复。不幸的是，这并没有解决它。它仍然会重定向我不想发生的用户！不过谢谢你
你必须添加 onclick="return false;"到提交按钮。

标签： javascript php jquery sql ajax

【解决方案1】：

我能够获得您正在寻找的功能。我的例子和解释如下：

假设有两个表：

1) states -> id varchar(2)（AL、MN、FL 等）和 state varchar(32)（阿拉巴马州、明尼苏达州、佛罗里达州等）

2) 城市 -> id int(5) autoinc、city varchar(64)（Mobile、Stillwater、Miami）和 state_id varchar(2)（AL、MN、FL）

表链接方式：city.state_id = states.id

现在我们来看看表格。

// autocomplete.php

在头部调用 JQuery 所需的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

在正文中设置您的表单。当焦点从字段移开时，状态输入将调用 javascript 函数，此时它将检索与该州关联的城市。

<form action="#">
    <label for="state">State: </label>
    <input type="text" name="state" id="state" onBlur="getCities();"/>

    <label for="city">City: </label>
    <input type="text" id="city" name="city"/>
</form>

下面正文中的表单，发挥 Jquery 的魔力。我想如果您要使用自动完成功能，请将其设置为在用户输入任何位置数据之前工作，在本例中为“状态”。我们通过将代码封装到函数中来做到这一点。

请记住，自动完成正在通过 GET 调用 php 文件，该文件返回一个值数组，自动完成用于在您键入时填充列表。

我们希望首先获得所有城市，然后一旦用户在州字段中输入信息，就可以获得与该州相关联的所有城市。本质上，我们将设置两次自动完成功能。

给你 - 处理自动完成的函数：

// set autocomplete
    function setAutocomplete(data) {
        $('#city').autocomplete({
            source: data,
            minLength: 1
        });
    }

现在设置自动完成，显示所有城市。

// autocomplete default
    setAutocomplete('getautocomplete.php');

此时，如果您开始在城市输入字段中输入内容，您将看到所有城市，无论是哪个州。

现在我们将处理当用户在状态输入中进入状态时会发生什么：

// get cities based on state input    
    function getCities() {
        var state_name = $('#state').val();
        setAutocomplete('getautocomplete.php?state='+state_name);
    }

就是这样！当您输入状态名称并失去对该字段的关注时，它将更改状态输入字段上的自动完成，再次调用 getautocomplete.php 但这次按状态名称过滤。

现在我们来看看 PHP 文件。

// getautocomplete.php

从顶部 -> 设置您的数据库连接：

$mysqli = new mysqli('localhost', 'root', '', 'php_autocomplete');

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

然后设置 SQL 查询所需的参数。

// get parameters
$term    = isset($_GET['term']) ? $_GET['term'] : NULL;
$state   = isset($_GET['state']) ? $_GET['state'] : NULL;

现在我们检查是否设置了 state 参数，因为这决定了我们使用哪个 SQL SELECT 字符串。

// set query dependant on if state available
if ( $state == NULL ) {
    // get all cities
    $query = 'SELECT city 
              FROM cities 
              WHERE city LIKE "%'.$term.'%" 
              ORDER BY city';
} else {
    // filter by state
    $query = 'SELECT city 
              FROM cities 
              INNER JOIN states ON cities.state_id=states.id 
              WHERE (state="'.$state.'" AND city LIKE "%'.$term.'%") 
              ORDER BY city';
}

最后我们返回并打印出结果（本质上是一个数组），这是 JQuery 自动完成将用来填充自动完成列表的：

// get results
$results = $mysqli->query($query);
$json    = array();

while ( $city = $results->fetch_array() ) {
    $json[] = array( 'value' => $city['city'], 'label' => $city['city'] );
}

echo json_encode($json);

您不需要使用 AJAX。自动完成本质上已经在 getautocomplete.php 上做 AJAX。我们只是通过添加 ?state=state_name 给它一个额外的参数，然后在 PHP 中我们考虑该参数并根据需要制作 SQL SELECT 语句。

这是两个文件的完整代码，因此您可以在没有我的任何 cmets 的情况下在上下文中查看它。我希望这可以帮助您解决问题。您应该能够使用您的表格和表单来完成这项工作。

//// autocomplete.php

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Autocomplete</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
   <form action="#">
      <label for="state">State: </label>
      <input type="text" name="state" id="state" onBlur="getCities();"/>
      <label for="city">City: </label>
      <input type="text" id="city" name="city"/>
   </form>
   <script type="text/javascript">
      // set autocomplete
      function setAutocomplete(data) {
          $('#city').autocomplete({
            source: data,
            minLength: 1
          });
      }

      // autocomplete default
      setAutocomplete('getautocomplete.php');

      // get cities based on state input    
      function getCities() {
        var state_name = $('#state').val();
        setAutocomplete('getautocomplete.php?state='+state_name);
      }
  </script>
</body>
</html>

///// getautocomplete.php

<?php

$mysqli = new mysqli('localhost', 'root', '', 'php_autocomplete');

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

// get parameters
$term    = isset($_GET['term']) ? $_GET['term'] : NULL;
$state   = isset($_GET['state']) ? $_GET['state'] : NULL;

// set query dependant on if state available
if ( $state == NULL ) {
    // get all cities
    $query = 'SELECT city 
              FROM cities 
              WHERE city LIKE "%'.$term.'%" 
              ORDER BY city';
} else {
    // filter by state
    $query = 'SELECT city 
              FROM cities 
              INNER JOIN states ON cities.state_id=states.id 
              WHERE (state="'.$state.'" AND city LIKE "%'.$term.'%") 
              ORDER BY city';
}

// get results
$results = $mysqli->query($query);
$json    = array();

while ( $city = $results->fetch_array() ) {
    $json[] = array( 'value' => $city['city'], 'label' => $city['city'] );
}

echo json_encode($json);

?>

【讨论】：

这对我不起作用:(我不希望表单提交，因为要添加更多值。我只需要在表单输入的中途访问该变量。谢谢你的帮助
访问？您的意思是您只想在表单本身提交之前在页面的其他地方使用该变量？我不确定为什么您需要一次更新数据库中的一个字段，而不是一次完成整个表单。你能解释一下你想要做什么吗？也许您应该在需要时使用 javascript 来提取该字段的值。
是的，我使用的是自动完成功能。当用户开始在另一个输入字段上输入时在该位置输入时，我希望自动完成仅显示该位置的位置。自动完成功能使用单独的 php 文件。因此，为什么我认为访问该值的最佳方法是将其存储在 sql 中。希望这是有道理的！谢谢
那么 autocomplete.php 文件访问数据库并根据用户位置输入拉取位置？为什么你不能直接将用户值 ajax 到 autocomplete.php 并在此时提取你需要的信息，而不是存储用户输入？
那将是理想的.. 我曾尝试这样做，但我不确定如何.. ajax 让我感到困惑！自动完成代码是这个 jQuery("#endingAt").autocomplete({ source:'autocompletevenue.php', minLength:1 }); $query=mysql_query("SELECT * FROM place WHERE name like '%".$term."%' ORDER BY name"); $json=数组（）； while($name=mysql_fetch_array($query)){ $json[]=array( 'value'=> $name["name"], 'label'=>$name["name"] ); } echo json_encode($json);