Ajax/jQuery with Mongodb

私はAjax/jQueryでかなり新しいです。すべての顧客を取得し、IDで顧客を検索するためのAjax/jQueryに基づいたサンプルHTMLページを作成しようとしています。各顧客には、ID,firstNameおよびlastNameという3つの変数があります。Ajax/jQuery with Mongodb

お客様を作成、削除、更新したいと考えています。これはどのように実装できますか？ 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>

出典

2017-02-22 Anonymous

上記のコードは、サーバーの応答を表示するためのコードです。このコードは現在あなたが望むように動作しますか？ –

はい、それは非常にうまく動作します:) –

。それはいいです。追加/更新/削除に関しては、使用できるさまざまな方法とフォーマットがあります。

インターネットで検索すると、REST、SOAPなどの単語が検索されます。これらのそれぞれは、サーバーとの通信の方法であり、サーバーがどのように要求を受信するかを定義します。どの方法を選択するかは重要ではありません。そして、あなたが好きなら、全くメソッドを使わなくても、何かを完全に自分のものにすることもできます。ここで

は重要なものである：

サーバーに送信されます信号決めます。

更新要求の場合、更新される人物のすべての人物データとレコードIDを含めることをお勧めします。

作成リクエストの場合は、何も送信しないでください。ただし、新しく作成されたユーザーのIDを受け取る必要があります。または、IDなしで完全な人物を送信し、割り当てられたIDでサーバーに応答させることができます。そのあなたの選択!!!

削除要求の場合は、単純なシステムから始め、削除される人物のIDのみを送信してください。後で、他のパラメータを追加して、削除要求が確実かどうかを確認できます。シンプルに始め、そこからビルドします。
要求が

我々はステップ1での話これの一部を送信した後に受信されるか、信号を決定します。たとえば、新しい人物を作成するときには、その人物の新しいIDをサーバーからの応答に見たいと思うでしょう。新しい個人IDを送信していない場合、少なくともその人物が作成されたことを示す確認コードが必要になります。

正常に更新と削除を確認するには、ブラウザ側から見たいものについて考えてください。あなたはブラウザ側から見たエラーをどのようにしたいのですか？

これをすべて完了したら、コードの作成を開始できます。
あなたは方法を決定したら、サーバーの作成を開始することができ、サーバに

を作成します。議論の目的のために、以下を使用しましょう。更新リクエストをmysite.com/person/update.phpに送信します。削除リクエストをmysite.com/person/delete.phpに送信し、mysite.com/person/create.phpへのリクエストを作成します。この例では、PHPをサーバー側の言語として選択しています。

私たちは送信しているすべてのデータを送信するためにPOSTを使用します。ブラウザでJSON形式でデータを受信します。

この計画が完了したら、必要な作業を行うための3つの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 */ 
```
<オール開始= "4">
AJAXは、クライアント（Webサイト）への呼び出しを追加：

人/ update.phpを：更新スクリプトは次のようになります。

上記の例では、いくつかの重要なことを定義しています。私たちは 'id'、 'first_name'、 'last_name'という名前の投稿フィールドの値を探しているので、Webクライアントはこれらの3つのフィールドにフォームデータを送信する必要があります。

また、上記の例では、応答に 'type'、 'id'、 'status'という3つの値を設定しています。 AJAXのコードでは、これらの値を見て、アクションが必要かどうかを判断したり、サイトのユーザーに成功の結果を表示したりする必要があります。

これらの値は、私がその場所で選んだ値です。つまり、開発者（それはあなたです）は完全に制御できます。

手順1,2、および3で行った決定に基づいて送受信するようにAJAXを設計します。途中で問題がある場合は、スタックオーバーフローに戻ってください。あなたのアイデア、あなたがやろうとしていること、やったことについて教えてください。コードを私たちと共有し、さらにアドバイスを求める。

すべての決定があなたの手元にあるので、より具体的な例であなたに答えることができるようにあなたの質問は広すぎます。私の答えがあなたにいくつかの考えを与えてくれることを願っており、あなたが次のステップに進むのを助けます。

ハッピーコーディング！

P.S.クエリーをデータベースサーバーに直接送信することは可能です。私はこれに反対することを勧めます。 Webアプリケーションを軽く（サイズは小さく）保ち、サーバーアプリケーションがデータベース通信のような大量の作業を処理できるようにします。

出典

2017-02-22 03:23:42

答えて

関連する問題