使用jQuery插入数据库并获得反馈

时间:2017-04-10 14:12:36

标签: php jquery html mysql

我在服务器上有一个MySQL数据库。这是我的HTML存储在该数据库中的东西

var shV = localStorage.getItem("PersName");
var idV = localStorage.getItem("codeQR");
var posV = localStorage.getItem("position");

window.open('http://*.es/insert.php?sh='+shV+'&id='+idV+'&pos='+posV,
'blank','location=no,hidden=yes,closebuttoncaption=Done,toolbar=no');

Insert.PHP文件

<?php
try {
$pdo = new PDO('mysql:host=mysql.**');
    $shortV = $_GET['sh'];
    $idnumberV = $_GET['id'];
    $positionV = $_GET['pos'];
$statement = $pdo->prepare("INSERT INTO idtabelle (short, idnumber, position) 
VALUES (:sh, :id, :pos)");
$statement->execute(array('sh' => $shortV, 'id' => $idnumberV, 'pos' => $positionV));  
echo "$idnumberV eingetragen"; 
    $pdo = null;
    } catch (PDOException $e) {
    die($e -> getMessage());
    }
?>

我想在不打开新网页的情况下存储它们或向其显示插入网址。在它进入数据库之后,我想要一个类似于&#34的反馈;您的数据已被输入&#34;只有当他们真的在数据库中时。

在其他HTML中,我通过在文本字段中输入ID来搜索位置。它像我想要的那样工作。在页面中,给出了反馈。

Search.html

<form id="search" name="search" method="post">
    <input type="text" id="txt1" name="search_input">
  <button type="submit" class="btn btn-info" id="bt1">Get Position</button>
  </form>
    <div id="div1">Testing</div>
      <div id="div2"> Here </div>
  <script>
            $(document).ready(function(){
                $("#search").on("submit", function(e){
                    e.preventDefault();
                    $.post("/search3.php", $("#search").serialize(), function(d){
                        if (!$.trim(d)){   
                            alert("Nothing found !");   }
                        else{   
                            $("#div1").empty().append(d);
                            localStorage.setItem("PosGet",d);   
                            document.getElementById("div2").innerHTML=(d);
                                }
                        });
                    });
            });

Search.PHP文件

<?php
 try {
$pdo = new PDO('mysql:host=mysql.**');
    $pdo -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $idV = (isset($_POST['search_input'])) ? $idV = $_POST['search_input'] : exit('The search was empty'); 
    $statement = $pdo->prepare("SELECT position, short FROM idtabelle WHERE idnumber = ?");
    $statement->bindParam(1, $idV);
    $statement->execute();
    foreach($statement -> fetchAll() as $row){
    echo $row['position'];
    }
    $pdo = null;
    } catch (PDOException $e) {
    die($e -> getMessage());
    }
?>

我怎么能这样做,插入就像页面上的搜索和反馈一样? 谢谢。

2 个答案:

答案 0 :(得分:0)

在您的第一个示例中,代码运行一个新窗口(但隐藏),因此您无法从初始窗口获取结果。你应该像第二个提供的例子那样做。

如果你可以使用jQuery(你的例子看起来像),你可以使用jQuery.ajax()函数

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})

您也可以获得成功和失败回调。例如:

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" },
  function(){
      console.log("success");
  },
  function(){
      console.log("error")
  }
})

答案 1 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$dbconn = pg_connect('localhost','peter','abc123','my_db');
if (!$con) {
    die('Could not connect');
}



$query = "SELECT * FROM user WHERE id = $1";
$result = pg_prepare($dbconn, "my_query", $query);

$data = array($q);
$result = pg_execute($dbconn, "my_query", $data);


echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = pg_fetch_row($result)) {
    echo "<tr>";
    echo "<td>" . $row[0] . "</td>";
    echo "<td>" . $row[1] . "</td>";
    echo "<td>" . $row[2] . "</td>";
    echo "<td>" . $row[3] . "</td>";
    echo "<td>" . $row[4] . "</td>";
    echo "</tr>";
}
echo "</table>";
pg_close($dbconn);
?>
</body>
</html>

Html

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

这是一个使用PostgreSQL的简单示例,供您了解基础知识。如果你想要更多帮助开始编程,如果你有任何困难,请向社区询问。

在上面的示例中,当用户在上面的下拉列表中选择一个人时,会执行一个名为“showUser()”的函数。

该函数由onchange事件触发。

代码说明:

首先,检查人是否被选中。如果未选择任何人(str ==“”),请清除txtHint的内容并退出该功能。如果选择了某个人,请执行以下操作:

1)创建XMLHttpRequest对象

2)创建服务器响应准备就绪时要执行的功能

3)将请求发送到服务器上的文件

请注意,参数(q)已添加到URL(包含下拉列表的内容)

上面的JavaScript调用的服务器上的页面是一个名为“getuser.php”的PHP文件。

“getuser.php”中的源代码在PostgreSQL数据库上运行preaper执行,并将结果返回到HTML表中。

说明:当查询从JavaScript发送到PHP文件时,会发生以下情况:

1)PHP打开与PostgreSQL服务器的连接

2)找到了正确的人

3)创建一个HTML表格,填充数据,然后发送回“txtHint”占位符。