Question

这是我的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，因此添加了日志语句，但浏览器在调用后重新加载页面，控制台中没有任何内容。

我在这里做错了什么？

非常感谢任何帮助。

提前致谢。

Answer 1

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

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

event.preventDefault()

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

Answer 2

<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>

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

2 个答案: