的 a live example

Question

我会包含一个jsfiddle，但是ajax在它们中不起作用

 <script>// loads the survay quesitons using ajax
 function sendAJAX() {
   $('#ajax').load('survey.html');
 }
 </script>

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/javascript.js"></script>
  <LINK REL=StyleSheet HREF="css/code.css" TYPE="text/css">

</head>

<body>
  <form class="name" method="post">
    Name:
    <input type="text" name="name" />

    <button id="load" onclick="sendAJAX()" class="button">Next</button>

    <div id="ajax">

    </div>


</body>

</html>

这是它应该加载的代码

<div class= "section">


    <img src="img/mbeef.png" alt="Beef" class="choices" data-value="11"> 
    <img src="img/mbacon.png" alt="Bacon" class="choices" data-value="12">
    <br>

    <button class="name" id="btn-show">Submit</button>

的 a live example

当我将脚本放入我的javascript.js文件

时，它也不起作用

修改

我将代码更改为

// loads the survay quesitons using ajax
        function sendAJAX(e) {
    e.preventDefault();
    $('#ajax').load('survey.html');
}   
      </script>

现在我得到错误Uncaught TypeError：无法读取未定义的属性'preventDefault'

Answer 1

由于button位于form，您的网页很可能会回复，请尝试使用preventDefault

<button id="load" onclick="sendAJAX(event)" class="button">Next</button>

function sendAJAX(e) {
    e.preventDefault();

    $('#ajax').load('survey.html');
}

Answer 2

这是页面的提交（好吧，表格）。页面重新加载，因为正常提交不会停止。

你必须停止这个事件，jQuery有.preventDefault()。您可以阻止提交按钮：

$('#load').on('click', function(event){
    event.preventDefault(); // stop the 'click' event
    $('#ajax').load('survey.html');
});

这将阻止提交通过按钮。但是表单仍然可以提交，因此您可以停止提交表单本身：

$('form.name').on('submit', function(event){
    event.preventDefault(); // stop the 'submit' event
    $('#ajax').load('survey.html');
});

Answer 3

设置按钮的type属性。

<button id='load' onclick='sendAJAX()' type='button' class='button'>Next</button>

我使用的是ajax .load方法，但它只加载内容一秒钟然后消失

的 a live example

修改

3 个答案: