Как сделать AJAX-вызов с помощью jQuery?

Question

Я имею дело с проектом, где мне нужно собрать данные от пользователя и отобразить на той же странице.Я успешно завершил вызов Ajax с использованием JavaScript, но теперь я хочу использовать 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);
}

Этомой регистр.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

Вы можете использовать ajax-вызов jquery, используя следующий синтаксис.Добавьте это в головной раздел вашей страницы для справки 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 или веб-сервис.

Для ссылок можно использовать следующие ссылки.

WebService: https://www.c -sharpcorner.com/ UploadFile / 00a8b7 / веб-сервис /

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

Примечание. Оба эти параметра предназначены для бэкэнда C #.Пожалуйста, укажите название вашего языка, если вы используете что-либо еще.

Answer 2

$.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 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, вы можете использовать $('#formId').serialize(), чтобы создать для вас строку vars. Подробнее о .serialize() можно прочитать здесь .

Answer 4

Это синтаксис 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
          }
       });
    }  

Answer 5

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 6

Это обобщенное представление запроса 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 ()