Javascript 使用AJAX和JSON从服务器发送和接收信息_Javascript_Ajax_Json_Database_Server

Javascript 使用AJAX和JSON从服务器发送和接收信息

javascript ajax json database server

Javascript 使用AJAX和JSON从服务器发送和接收信息,javascript,ajax,json,database,server,Javascript,Ajax,Json,Database,Server,我正在制作一个网页，该网页使用AJAX和JSON与服务器上的数据库进行交互该页面应该向服务器发送两条信息，一条id号和一个事件，并返回一个与id号fname、lname、sex等匹配的人的信息表。我创建了表单并正确验证了它，但是，我不知道从这里走到哪里我在过去的一个项目中涉猎过AJAX，但无法让它工作，而且我从未使用过JSON，甚至不知道它做什么。如果有人能帮我，我将不胜感激以下是我目前掌握的代码： <html> <body> <h2>Welcom

我正在制作一个网页，该网页使用AJAX和JSON与服务器上的数据库进行交互

该页面应该向服务器发送两条信息，一条id号和一个事件，并返回一个与id号fname、lname、sex等匹配的人的信息表。我创建了表单并正确验证了它，但是，我不知道从这里走到哪里

我在过去的一个项目中涉猎过AJAX，但无法让它工作，而且我从未使用过JSON，甚至不知道它做什么。如果有人能帮我，我将不胜感激

以下是我目前掌握的代码：

<html>
 <body>
  <h2>Welcome to our People Finder Database</h2>
  Pleae fill out the following form to find information on the person you are looking for. <br>

  <form onsubmit="return validate()">
    ID:<input type="text" id="id"> <br>
    Event Type:
    <select id="event" name="cards">
        <option value="selectEvent">Please select an event</option>
        <option value="BIRT">Birth</option>
        <option value="DEAT">Death</option>
        <option value="BURI">Buried</option>
    </select> <br>
    <input type="submit" value="Submit"> <br>
   </form>

   <script type="text/javascript">
        function validate() {
            return checkEmpty();
        }

        function checkEmpty() {
            var ddl = document.getElementById("event");
            var ev = document.getElementById("id");
            var selectedEvent = ddl.options[ddl.selectedIndex].value;
            if(selectedEvent == "selectEvent" || id.value == "") {
                alert("Please enter an ID number or Event Type");
            }
        }
    </script>
  </body>
</html>

提前感谢。

您必须用表单的操作url替换“targetUrl”。例如：“target.php”

<html>
<head>
<title>Project 6</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    function validate() {
        return checkEmpty();
    }

    function checkEmpty() {
        var ddl = document.getElementById("event");
        var ev = document.getElementById("id");
        var selectedEvent = ddl.options[ddl.selectedIndex].value;
        if(selectedEvent == "selectEvent" || id.value == "") {
            alert("Please enter an ID number or Event Type");
        }
    }

    $('document').ready(function(){
       $('#submit_btn').on('click',function(){
         $.post('targetUrl',$('#myform').serialize()).success(function(response){
            //code to handle response from server
         });
      });
    });
</script>
<style type="text/css">
    body {
        background-color: black;
        color: blue;
        text-align: center;
        border: 2px double blue;
    }
</style>
</head>

<body>
<h2>Welcome to our People Finder Database</h2>
Pleae fill out the following form to find information on the person you are looking for. <br>
While neither field is required, you must fill out at least one of the two fields to receive any information <br>
Also note that the ID number should be the letter "I" followed by a number. <br>
<form id="myform" onsubmit="return validate()">
    ID:<input type="text" id="id" name="id"> <br>
    Event Type:
        <select id="event" name="cards">
            <option value="selectEvent">Please select an event</option>
            <option value="BIRT">Birth</option>
            <option value="DEAT">Death</option>
            <option value="BURI">Buried</option>
        </select> <br>
    <input type="button" id="submit_btn" value="Submit"> <br>
</form>
</body>
</html>

如果您不熟悉存储和检索数据，我肯定会推荐您提供的服务。它使存储和检索数据变得微不足道。最重要的是，除非你的应用每秒发出超过30个API请求，否则该服务是免费的。我有一个每天有61个用户使用的应用程序，我们从未接近每秒30个请求的限制

要保存您的信息，您可以编写：

$('document').ready(function(){

    $('#submit_btn').on('click',function(){ // detect button click, need to add "submit_btn" as the id for your button

        var EventInfo = Parse.Object.extend("EventInfo"); //create a reference to your class
        var newObject = new EventInfo(); //create a new instance of your class

        newObject.set("id", $("#id").val()); //set some properties on the object
        newObject.set("event", $("#event").val()); //set some more properties on the object
        newObject.save(null, { //save the new object
          success: function(returnedObject) {
            console.log('New object created with objectId: ' + returnedObject.id); 
          },
          error: function(returnedObject, error) {
            console.log('Failed to create new object, with error code: ' + error.message);
          }
        });
     });
});

以后检索该信息将非常简单：

    var EventInfo = Parse.Object.extend("EventInfo"); //create a reference to your class
    var query = new Parse.Query(EventInfo); //create a query to get stored objects with this class
    query.find({
      success: function(results) { //"results" is an array, you can fine tune your queries to retrieve specific save objects too
        for (var i = 0; i < results.length; i++) { 
          var object = results[i];

          console.log("Result #"+ (i+1)); 
          console.log("Id = "+ object.get("id"));
          console.log("Event = "+ object.get("event"));
        }
      },
      error: function(error) {
        console.log("Failed to complete Query - Error: " + error.code + " " + error.message);
      }
    });

您的服务器支持什么接口？您将使用哪种后端服务器端技术？这看起来很棒，明天必须试用。在使用现有数据库的代码的最后一节中，URL是数据库的地址吗？不，URL是php页面，您必须编写该页面才能将信息保存到数据库中，然后检索它。但如果你想走这条路，你至少要学习一些基本的php，以及如何使用PDO安全地保存和检索数据。更不用说，你必须建立和维护数据库本身，这可能有点令人畏惧，或者至少对我来说是这样，在经历了很多混乱之后，我发现了解析，这很简单。问题是我并没有真正编写数据库，它已经被创建了。我的页面应该只显示与用户输入的id相匹配的信息。在这种情况下，ajax方法将为您完成一半的工作。也就是说，它将信息发送到能够存储信息的php页面。您需要决定使用哪种方法来存储和检索信息。我推荐一个使用PDO存储和检索信息的php页面

$('document').ready(function(){
        $('#submit_btn').on('click',function(){ // detect button click, need to add "submit_btn" as the id for your button
           //get the inputted values 
            var dataString = 'id=' + $("#id").val()
                       + '&event=' + $("#event").val()
             //make the ajax call 
            $.ajax({
                type: "POST",
                url: "https://mywebsite.com/mypage.php",
                data: dataString,
                success: function(data) {
                  //do something with the returned data
                }
            });
        });
    });