apollo1616

Ajax发起Get请求方式----JavaScript

URL

    re_path(\'main2/\', views.main2, name=\'main2\'),
    re_path(\'index2/\', views.index2, name=\'index2\'),

VIEW

def index2(request):
    return render(request, \'index2.html\')

def main2(request):
    print(request.GET.get(\'name\'))
    print(request.GET.get(\'age\'))
    print(request.GET.get(\'gender\'))
    print(request.GET)
    return HttpResponse("it\'s Ok")

引用及样式

<head>
    <meta charset="UTF-8">
    <title>Apollo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
</head>

HTML

<div class="container">
    <div class="row">
        <h1>Ajax全套</h1>
        <h3>1.Ajax发送GET请求</h3>
        <div>
            <a class="btn btn-primary" style="display: inline-block" onclick="AjaxGet1();">AjaxGet</a>
            <a class="btn btn-success" style="display: inline-block" onclick="Ajaxjs();">AjaxJavaScript</a>
        </div>
    </div>
    <script src="/static/jquery-3.1.1.js"></script>
    <script>
        function Ajaxjs(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    // 接收完毕服务器返回的数据
                    console.log(xhr.responseText);
                }
            };
            // 接收数据的URL路径
            xhr.open(\'GET\',\'{% url \'main2\' %}?name=apollo&age=28&gender=male\');
            xhr.send(null);
        }
    </script>
</div>

 

发表于 2018-11-14 13:33  阿波罗Apollo  阅读(108)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章:

  • 2021-12-03
  • 2021-11-23
  • 2021-08-22
  • 2021-10-01
  • 2021-11-02
  • 2021-09-21
  • 2021-11-30
猜你喜欢
  • 2021-11-23
  • 2021-11-02
  • 2021-10-01
  • 2021-11-23
  • 2021-12-03
  • 2021-12-13
  • 2021-11-23
相关资源
相似解决方案