Fatal编程技术网
  • javascript/
  • Javascript 使用Mongodb的Ajax/jQuery

Javascript 使用Mongodb的Ajax/jQuery

javascript jquery ajax

Javascript 使用Mongodb的Ajax/jQuery,javascript,jquery,ajax,Javascript,Jquery,Ajax,我对Ajax/jQuery相当陌生。我试图创建一个基于Ajax/jQuery的示例HTML页面，用于获取所有客户并按ID搜索客户。每个客户有三个变量：ID、firstName和lastName 我想创建、删除和更新客户。如何实现这一点 当前带有javascript的HTML： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"

我对Ajax/jQuery相当陌生。我试图创建一个基于Ajax/jQuery的示例HTML页面，用于获取所有客户并按ID搜索客户。每个客户有三个变量：
ID
、
firstName
和
lastName

我想创建、删除和更新客户。如何实现这一点

当前带有javascript的HTML：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <input name="search" type="text" maxlength="100" id="search"/>
    <button onclick="searchID()"> Search ID </button>
     <button onclick="showAll()"> Show All </button>
      <button onclick="createCustomer"> CreateCustomer </button>
      <button onclick="updateCustomer"> UpdateCustomer </button>
      <button onclick="deleteCustomer"> DeleteCustomer </button>


    <div id="persons"></div>

    <script>
        function searchID()
        {
            var id = document.getElementById("search").value;
            $("#persons").html("");


            $.getJSON("http://192.168.17.128:8080/customers/" + id,  function(data)
            {
                for (var i in data) {
                    $('#persons').append("<p>ID: " + data[i].id + "</p>")
                    $('#persons').append("<p>First name: " + data[i].firstName + "</p>")
                    $('#persons').append("<p>Last name: " + data[i].lastName + "</p><br>")
                }
            });


        }

        function showAll()
        {
            $("#persons").html("");

            $.getJSON("http://192.168.17.128:8080/customers/",  function(data)
            {
                for (var i in data) {
                    $('#persons').append("<p>ID: " + data[i].id + "</p>")
                    $('#persons').append("<p>First name: " + data[i].firstName + "</p>")
                    $('#persons').append("<p>Last name: " + data[i].lastName + "</p><br>")
                }
            });
        }
    </script>
</body>
</html>


搜索ID
全部展示
创建客户
UpdateCustomer
删除客户
函数searchID（）
{
var id=document.getElementById（“搜索”）.value；
$（“#人”）.html（“”）；
$.getJSON（“http://192.168.17.128:8080/customers/“+id，函数（数据）
{
用于（数据中的var i）{
$（“#persons”）.append（“ID:+data[i].ID+”
”）
$（“#persons”）。追加（“名字：“+data[i].firstName+”
”）
$（“#persons”）。追加（姓：“+data[i].lastName+”

）
}
});
}
函数showAll（）
{
$（“#人”）.html（“”）；
$.getJSON（“http://192.168.17.128:8080/customers/，函数（数据）
{
用于（数据中的var i）{
$（“#persons”）.append（“ID:+data[i].ID+”
”）
$（“#persons”）。追加（“名字：“+data[i].firstName+”
”）
$（“#persons”）。追加（姓：“+data[i].lastName+”

）
}
});
}
您已经解决了显示部分的问题。那很好。关于添加/更新/删除，您可以使用许多不同的方法和格式

如果你在互联网上搜索，你会发现像REST、SOAP等词。其中每一种都是与服务器通信的方法，用于定义服务器将如何接收请求。你选择哪种方法并不重要。而且，如果你愿意，你甚至可以不使用任何方法，完全自己做一些东西

重要的是：

  • 决定将向服务器发送什么信号。

    对于更新请求，您需要包括所有人员数据以及正在更新的人员的记录id

    对于创建请求，不应发送任何内容，但应接收新创建人员的id。或者，您可以发送一个没有ID的完整人员，并让服务器使用已分配的ID进行响应。。。这是你的选择

    对于删除请求，从一个简单的系统开始，只发送被删除人的ID。稍后，您可以添加其他参数来检查用户是否确定删除请求。从简单开始，然后从那里开始构建

  • 决定发送请求后将接收什么信号

    我们在第一步中讨论了其中一些。例如，当我们创建一个新的人员时，我们希望在服务器的响应中看到该人员的新id。如果我们不发送新的人员ID，我们至少需要一个确认码，表明该人员已创建

    考虑一下您希望从浏览器端看到什么，以确认更新和删除成功。您希望错误在浏览器端看起来像什么

    完成所有这些之后，就可以开始创建代码了

  • 创建服务器

    一旦决定了方法，就可以开始创建服务器。为了便于讨论，让我们使用以下内容。我们将把更新请求发送到
    mysite.com/person/update.php
    。我们将向
    mysite.com/person/delete.php
    发送删除请求，并向
    mysite.com/person/create.php
    创建请求。您会注意到，在这个示例中，我选择了PHP作为服务器端语言

    我们将使用POST来传输我们正在发送的所有数据，并在浏览器上以JSON格式接收数据

    一旦我们有了这个计划，我们就可以创建三个PHP脚本来完成我们需要的工作。更新脚本可能如下所示：

    • person/update.php：

     $id = $_POST['id'];
 $fname = $_POST['first_name']; 
 $lname = $_POST['last_name'];

 /* perform some checking for SQL injection attacks */

 /* use the ID to update the database */

 /* prepare a response to the web browser */
 $response = new StdClass();
 $response->type = "update";
 $response->id   = $id;
 $response->status = "SUCCESS";
 echo( json_encode( $response ) );
 /* end file after outputting JSON response */
  • 将AJAX调用添加到客户端（网站）

    在上面的例子中，我们定义了一些关键的东西。我们正在寻找名为“id”、“first_name”和“last_name”的post字段中的值，因此我们的web客户端需要在这三个字段中发送表单数据

    此外，在上面的示例中，我们在响应中设置了三个值：“type”、“id”、“status”。我们的AJAX代码应该知道如何查看这些值，并决定是否需要进一步的操作，或者向站点的用户显示成功的结果，因为我们都希望某种形式的确认，即我们所做的实际工作是有效的

    请记住，这些值是我当场选择的值，这意味着开发人员（即您）拥有完全的控制权

    根据您在步骤1、2和3中做出的决定，设计AJAX以发送和接收。。。。如果您在过程中遇到问题，请返回堆栈溢出。请告诉我们您的想法、您正在尝试做什么以及您所做的工作。与我们分享您的代码，并寻求进一步的建议

    • 目前，你的问题太广泛，我们无法用更具体的例子回答你，因为所有的决定都在你手中。我希望我的回答能给你一些思考的东西，并帮助你迈向下一步

    快乐编码

    另外，可以直接向数据库服务器发送查询。我建议不要这样做。让您的web应用程序轻一些（小一些），让服务器应用程序处理繁重的工作，如数据库通信。

    上面显示的代码用于显示服务器响应。此代码当前是否按您希望的方式工作？是的，它工作得非常好：）