【问题标题】:How to display responded page by server using GET request in ajax call如何在ajax调用中使用GET请求显示服务器响应的页面
【发布时间】:2018-09-23 16:47:11
【问题描述】:
function regCall(token){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000',
        dataType: 'HTML',
        headers: {
            'x-auth': token
        }
    });
}

这是我的 ajax GET 请求,我想在 html 中显示给定的 url。 下面是我的登录逻辑的整个 sn-p。

$(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();
 });
})

这是sn-p的全部代码。

【问题讨论】:

    标签: javascript jquery node.js ajax


    【解决方案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);
            }
        });
    }
    

    【讨论】:

    • targetElement 应替换为要插入数据的元素的 ID。您可以使用 $("body") 直接将数据插入正文。 @maheshmaharana
    • 新问题出现在我重新加载页面然后再次登录页面呈现任何解决方案?
    • 问题不是ajax的问题​​,直接查看http://localhost:3000中的登录逻辑,刷新看看是否有效?
    • 先生,请检查我用登录逻辑编辑的帖子。
    • SUCCESS 和 ERROR 不代表登录成功或登录失败。 ajax操作成功。您必须在登录页面中处理 localStorage 而不是在 ajax success 中。同样,在少数情况下会发生 ajax 错误以及服务器问题或编程错误,并且与无效的用户名和密码无关。 @mah
    【解决方案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>
    

    【讨论】:

    • 新的问题出现在我重新加载页面然后再次登录页面呈现任何解决方案?
    • 您能更详细地解释您的问题吗?上传代码sn -p
    • 使用会话来维护登录用户的状态。当您重新加载/刷新页面时,检查会话是否存在,将其重定向到特定页面。
    • 怎么做,请先生详细说明?
    • 在成功函数调用时使用cookie并设置cookie。如果获取cookie则在onLoad函数上检查cookie然后重定向到特定页面,否则重定向到同一页面。 document.cookie = 'username=;expires=Thu, 1970 年 1 月 1 日 00:00:01 GMT;'; document.cookie = "用户名="+用户名;我希望这可以帮助你。
    猜你喜欢
    • 1970-01-01
    • 2012-02-16
    • 1970-01-01
    • 1970-01-01
    • 2014-12-18
    • 1970-01-01
    • 1970-01-01
    • 2021-05-24
    • 2015-04-17
    相关资源
    最近更新 更多