Question

function regCall(token){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000',
        dataType: 'HTML',
        headers: {
            'x-auth': token
        }
    });
}

这是我的ajax GET请求，我想以html显示给定的url。以下是带有我的登录逻辑的完整代码段。

$(document).ready(()=>{
$('#login').submit((e)=>{
$.ajax({
    type: 'POST',
    url:'http://localhost:3000/login/users',
    data: {
      email: $('#email').val(),
      password: $('#password').val()
    },
    success: function(data, status, req){
      // alert(req.getResponseHeader('x-auth'));
      localStorage.setItem('t',req.getResponseHeader('x-auth'));
      var token = localStorage.getItem('t');
      regCall(token);
      // window.location.href = '/';

    },
    error: function (req, status, error) {
      // alert(req.getResponseHeader('x-auth'));
      localStorage.setItem('t',req.getResponseHeader('x-auth'));
      alert('Invalid email and password');
      window.location.href = '/login';
    }
   });
  e.preventDefault();
 });
})

这是代码段的全部代码。

Answer 1

从SUCCESS函数中提取响应数据：

function regCall(token){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000',
        dataType: 'HTML',
        headers: {
            'x-auth': token
        },
        success: function(data){
            //targetElement should be replaced by the ID of target element
            $("#targetElement").html(data);
        }
    });
}

Answer 2

By using the success callback function you can display the response content on the HTML place

**First method:**

function regCall(token){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000',
        dataType: 'HTML',
        headers: {
            'x-auth': token
        },
        success: function(responseData){
           $("#div or class Id").html(responseData);
        }

    });
}


**Second method:**

function regCall(token){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000',
        dataType: 'HTML',
        headers: {
            'x-auth': token
        }
    }).done(function(responseData){
     $("#div or class Id").html(responseData);
   });
}

**NOTE:**
Make sure you are having the jQuery script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在ajax调用中使用GET请求按服务器显示响应的页面

2 个答案: