Javascript 加载新页面而不刷新当前页面_Javascript_Jquery_Html_Ajax_Django Templates

Javascript 加载新页面而不刷新当前页面

javascript jquery html ajax

Javascript 加载新页面而不刷新当前页面,javascript,jquery,html,ajax,django-templates,Javascript,Jquery,Html,Ajax,Django Templates,这是我的密码。。。。 okay.html {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post"> {% csrf_token %} <div align="center" class="container table-resp

这是我的密码。。。。 okay.html

{% extends "sch/base.html" %}
{% load staticfiles %}
{% block content %}
<div class="row" id="ada">
    <form action="" method="post">
       {% csrf_token %}
        <div align="center" class="container table-responsive mt-2" >
{% block scripts %}
{{ block.super }}
<script>
window.onload = function()
    {
        var button = document.querySelector('button');
        button.onclick= function(e)
            {
                e.preventDefault();
                addRecord()
            }
    }
    function addRecord() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ada").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "{% url 'add-advert' %}", true);
  xhttp.send();
}
</script>
{% endblock %}
            <div> <a href="javascript:;" onclick="addRecord()" ><button type="button" class="btn btn-primary"> Add New Advert </button></a></div>
    </form>
</div>
{% endblock %}

{%extends“sch/base.html”%}
{%load staticfiles%}
{%block content%}
{%csrf_令牌%}
{%block scripts%}
{{block.super}}
window.onload=函数（）
{
var button=document.querySelector（'button'）；
button.onclick=函数（e）
{
e、 预防默认值（）；
addRecord（）
}
}
函数addRecord（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“ada”）.innerHTML=this.responseText；
}
};
open（“GET”，“{%url'添加广告“%}”，true）；
xhttp.send（）；
}
{%endblock%}
{%endblock%}

base.html

<!DOCTYPE html >
{%load staticfiles%}
{% load crispy_forms_tags %}
<html>
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'style.css' %}"/>
    <title>{% block title %}{% endblock %}</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body class="container-fluid">
<div class="row">
<div class="col-lg-12">

    {% block content %}
    {% endblock %}

</div>
</div>
</body>
</html>


{%load staticfiles%}
{%load crispy_forms_tags%}
{%block title%}{%endblock%}
{%block content%}
{%endblock%}

我是javascript新手。。。。我正在尝试在当前页面（ok.html）的div中加载另一个页面（广告）。它们都扩展了base.html。我也尝试过使用$.ajax，但没有成功。

我被告知要添加第一个函数脚本，因为最初我得到的是未捕获的引用，所以我试图寻找更好的方法来定义函数addrecord，我想也许可以尝试添加

location.reload（）在这里：
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ada").innerHTML = this.responseText;
      location.reload();
    }
  };

HTML

按钮

阿贾克斯

jQuery（“.link1”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
processAjaxData（'about'，'/home/about'，'about'）；
}
尝试使用iframe而不是DIV。要加载第二个页面谢谢，我添加了一个警报功能以确保它正常工作，警报正常工作，但我调用的页面仍然没有显示。也许您可以查看此页面：欢迎使用堆栈溢出！请阅读并给出您的答案。为什么这可以解决OP面临的问题，他们应该如何解决“加载他们的第二页”和这个答案解决了其他人没有的问题。这些类型的答案更适合作为评论，只要你没有足够的声誉发表评论，请不要回答这种内容（即没有深入解释的解决方案）。谢谢！
<div class="row">
        <nav role="navigation" class="nav">
            <a class="link1">Button</a>
       </nav>
</div>

<script>
jQuery( ".link1" ).on( "click", function(e) {
    e.preventDefault();
    processAjaxData('about', '/home/about', 'about');
}
</script>