如何使用jQuery進行AJAX調用？

Question

我正在處理需要從用戶收集數據並顯示在同一頁面上的項目。 我已經使用JavaScript成功完成了Ajax調用，但是現在我想使用Jquery。

這是我的JavaScript代碼：

var output1 = document.getElementById("output1");

function saveUserInfo() {
  var userName = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  var firstName = document.getElementById('firstname').value;
  var lastName = document.getElementById('lastname').value;
  var email = document.getElementById('email').value;
  var dob = document.getElementById('datepicker').value;
  var vars = "username=" + userName + "&password=" + password + "&firstname=" + firstName + "&lastname=" + lastName + "&email=" + email + "&datepicker=" + dob;

  var ajax = new XMLHttpRequest();
  var url = 'register.jsp';
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      output1.innerHTML = (ajax.responseText);
    }
  }
  ajax.open("POST", url, true);
  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajax.send(vars);
}

這是我的register.jsp：

<%@ page import ="java.sql.*" %>
<%@ page import ="javax.sql.*" %>


<%
String user = request.getParameter("username");

session.putValue("username",user);
String pwd = request.getParameter("password");
String fname = request.getParameter("firstname");
String lname = request.getParameter("lastname");
String email = request.getParameter("email");
String dob = request.getParameter("dob");

Class.forName("com.mysql.jdbc.Driver");

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/user_info2","root","root");

Statement st = con.createStatement();
ResultSet rs;

//int i=st.executeUpdate("insert into user_info value('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"')");

int i=st.executeUpdate("INSERT INTO `users`(user,pwd,fname,lname,email,dob) VALUE ('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"','"+dob+"')");
 %>



Registration is Successfull. Welcome <%=user %>,
Your Password is : <%=pwd %>, 
FirstName : <%=fname %>, 
LastName : <%=lname %>, 
Email : <%=email %>, 
and Date Of Birth is :  <%=dob %>,

Answer 1

這是jQuery ajax請求的通用視圖。

$.ajax({
    url: 'register.jsp',
    type: 'POST',
    data : {userName : userName,password: password,....},
    contentType: 'yourConentType', // ConentType that your are sending. No contentType needed if you just posting as query string parameters.
    success: function(response){
        // do whatever you want with response
     },
    error: function(error){
      console.log(error)
    }
});

如果要將值作為對象傳遞，則如下所示：

var formData = {userName : userName, password: password,...};
$.ajax({
    url: 'register.jsp',
    type: 'POST',
    data : JSON.stringify(formData),
    contentType: 'application/json',
    success: function(response){
        // do whatever you want with response
     },
    error: function(error){
      console.log(error)
    }
});

有關更多詳細信息： jQuery.ajax（）

Answer 2

function saveUserInfo() {
    var postData = {
        username: $('#userName').val(),
        password: $('#firstname').val(),
        firstName: $('#ss_unit').val(),
        lastName: $('#lastname').val(),
        email: $('#email').val(),
        dob: $('#datepicker').val()
    };

    $.post(url, postData).done(function(data) {
        output1.innerHTML = data;
    });
}

Answer 3

您可以將jQuery的$.post方法與.fail和.done 。 然后，您還可以使用查詢的選擇器從所有輸入中獲取值。

類似於以下內容：

var output1 = $("#output1");

function saveUserInfo() {
  var userName = $('#username').val();
  var password = $('#password').val();
  var firstName = $('#firstname').val();
  var lastName = $('#lastname').val();
  var email = $('#email').val();
  var dob = $('#datepicker').val();

  var data = {userName, passWord, firstName, lastName, email, dob};

  var url = 'register.jsp';
  $.post(url, data)
    .done(function(msg) { /* yay it worked */ });
    .fail(function(xhr, status, err) {
      output1.text(err);
    });
}

我還注意到您在代碼中得到了很多輸入字段。 如果所有這些輸入字段都位於一個表單中（例如，具有formId的id， formId可以使用$('#formId').serialize()為您創建vars字符串。您可以閱讀有關.serialize()更多信息在這里 。

Answer 4

 $.ajax({ type: "POST", url: url, data: data, dataType: dataType }).done(function(){ }).fail(function(){ }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 5

您可以使用以下語法來使用jquery的ajax調用。 將其添加到頁面的頭部以供jquery參考。

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

對於JS：

     function saveUserInfo() {
     $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "...",   // your api or url for fetching data
                    data: "..",   // your data coming from front end in json
                    dataType: "json",
                    success: function (data) {
                        // your action need to perform
                    },
                    error: function (result) {
                       // handle error
                    }
                });
     }

但是，不建議在客戶端提供與連接或數據庫相關的信息。 為了從后端獲取數據，建議為此創建一個API或Web服務。

您可以使用以下鏈接作為參考。

網絡服務： https ： //www.c-sharpcorner.com/UploadFile/00a8b7/web-service/

WebAPI： https ：//www.tutorialsteacher.com/webapi/create-web-api-project

注意：這些都用於C＃后端。 如果您正在使用其他任何語言，請提及您的語言名稱。

Answer 6

這是您代碼的jQuery語法

  function saveUserInfo() {
      var userName = $('username').val();
      var password = $('password').val;
      var firstName = $('firstname').val;
      var lastName = $('lastname').val;
      var email =$('email').val;
      var dob = $('datepicker').val;
      var vars = {'userName':userName ,'password':password ,'firstName':firstName ,'lastName':firstName ,'email':email ,'datepicker':dob }

      $.ajax(
      {
          url:'register.jsp',
          data:vars ,
          type:'POST'
          dataType : "json",
          contentType: "application/json; charset=utf-8",
          success:function(result)
          {
             code to use result here
          }
       });
    }