Question

我已经研究并试图在这篇文章中实现第二个答案：Ajax tutorial for post and get

不幸的是，在一个函数中运行$ .ajax脚本是由一个＆＃34; onclick＆＃34;仅显示警报，显示屏中没有其他更改。有没有更好的方法来执行$ .ajax流程？

这是我的＆＃34;给出＆＃34; html（在我的＆＃34; subject＆＃34; html中引用）：

<!DOCTYPE html>
<html>
<body>

<p>Cjax at your service</p>

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

</body>
</html>

这是我的主题＆＃34; （调用）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>

提前欣赏......

Answer 1

1st：您忘记包含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);
    }
  });

Answer 2

“主题”脚本需要这样的声明：

 <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

然而，这会将整个“给定”.html文件（包括所有＆lt;＆gt;标志）复制到主题文件的“结果”区域中，而不进行任何通常的格式化（例如，它被视为普通文本）。当我将.html文件转换为.php文件时，发生了php预编辑，但结果.html再次被视为痛苦文本和！？看起来有些解析会有所帮助！

尝试使用答案＆＃34; ajax-tutorial-for-post-and-get＆＃34;

2 个答案: