Ajax 调用加载完整的页面，不允许检查返回的数据

本文关键字：不允许 检查 数据 返回 调用 加载 Ajax | 更新日期: 2023-09-27 17:56:37

这是我拥有的HTML和JS：

</form>
  <div class="form-group">
    <div class="col-md-4">
        <button id="previewButton" class="btn btn-primary">Preview</button>
    </div>
</div>
</form>
<script>
    $("#previewButton").click(function () {
        var request = $.ajax({
            url: "/Product/GetRules/",
            method: "GET",
            dataType: "JSON"
        });
        request.done(function (data) {
            console.log(data);
        });
        request.fail(function (jqXHR, textStatus) {
            console.log(textStatus);
            alert("Request failed.");
        });
    });
</script>

这是控制器代码：

 public ActionResult GetRules()
 {
     ProductVM sVM = new ProductVM();
     sVM.ProductId = "test123";
     sVM.Rules = new List<string>() { ""20/2/15"", "10/2/15" };
     return Json(sVM, JsonRequestBehavior.AllowGet);
 }

和模型：

public class ProductVM
{
    public string ProductId { get; set; }
    public List<string> Rules { get; set; }
}

它在调试时命中控制器，我可以在 VS 中看到正确的对象。我在 .done 承诺中放置了一个警报，它的工作原理是显示带有[object object]的警报所以这意味着 AJAX 调用工作正常。

我想查看返回的 JSON，因此添加了日志语句，但浏览器在调用后重新加载页面，控制台中没有任何内容。

我在这里做错了什么？

任何帮助将不胜感激。

提前谢谢。

Ajax 调用加载完整的页面，不允许检查返回的数据

表单正在提交，因为您需要取消默认行为：

 $("#previewButton").click(function (event) {
    event.preventDefault();

event.preventDefault（）

说明：如果调用此方法，则不会触发事件的默认操作。

<form> <!-- </form> replaced with <form> -->
  <div class="form-group">
    <div class="col-md-4">
        <button id="previewButton" class="btn btn-primary">Preview</button>
    </div>
</div>
</form>
<script>
    $("#previewButton").click(function(e) {
        e.preventDefault();/* Added prevention */
        var request = $.ajax({
            url: "/Product/GetRules/",
            method: "GET",
            dataType: "JSON"
        });
        request.done(function (data) {
            console.log(data);
        });
        request.fail(function (jqXHR, textStatus) {
            console.log(textStatus);
            alert("Request failed.");
        });
    });
</script>
相关文章：