0

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

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

我在过去的项目中涉足 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>

提前致谢。

4

2 回答 2

1

您必须将“targetUrl”替换为表单的操作 url。（例如：'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>
于 2014-10-25T05:25:49.740 回答
0

如果您不熟悉存储和检索数据，我肯定会推荐https://parse.com/提供的服务。它使存储和检索数据变得微不足道。最重要的是，除非您的应用每秒发出超过 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);
      }
    });

如果您必须使用现有数据库来存储信息，您可以将其发送到如下所示的 php 页面，但请注意，使用此方法您仍然需要编写 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
                }
            });
        });
    });
于 2014-10-25T06:02:58.727 回答