javascript - 尝试使用 "ajax-tutorial-for-post-and-get"的答案

标签 javascript jquery ajax

我研究并尝试实现这篇文章中的第二个答案:Ajax tutorial for post and get

不幸的是,在由“onclick”启动的函数内运行 $.ajax 脚本仅显示警报,显示中没有其他变化。有没有更好的方法来执行 $.ajax 过程?

这是我的“给定”html(在我的“主题”html 中引用):

<!DOCTYPE html>
<html>
<body>

<p>Cjax at your service</p>

<br><p>"Hello World!"</p>

</body>
</html>

这是我的“主题”(调用)html:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

function ajaxAppend() {

  alert('ajaxAppend Function called');
  var myusername = $("#username").val();
  $.ajax({
    type: "GET",
    url: "Cjax01.html",
    data: "username=" + myusername,
    cache: false,
    success: function(data){
       $("#resultarea").text(data);
    }
  });
}
</script>

<p>PHP, not ASP can output plain text:</p>
<input type="text" name="username" id="username">
<div id="resultarea"></div>
<br>
<input type="text" name="results" id="results" value="Duck"><br>
<button onclick="ajaxAppend()">Try it</button>

</body>
</html>

提前致谢...

最佳答案

第一:您忘记包含 jquery 链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

第二:您返回的html不是text,因此更改此行$("#resultarea").text(data) ;$("#resultarea").html(data);

$.ajax({
    type: "GET",
    url: "Cjax01.html",
    data: "username=" + myusername,
    cache: false,
    success: function(data){
       $("#resultarea").html(data);
    }
  });

关于javascript - 尝试使用 "ajax-tutorial-for-post-and-get"的答案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45053068/

相关文章:

javascript - 样式组件不适用于 create-react-library

Javascript重置数组

javascript - jQuery 在 td 内添加一个文本框,并防止在同一单元格内第二次发生单击事件时添加更多文本框

javascript - 通过 Ajax 将表单数据传递给 Action

javascript - ES6 到 ES5 需要帮助修复

javascript - Express js 中的一次性密码生成

javascript - 从循环中的不同元素获取不同的值

php - 在 $.ajax 调用上创建进度条

html - 类型错误 : dbg is undefined in angularjs

javascript - 在每个 span 元素上画圆圈