ajax在发布后自动生成查询字符串

Question

我正在向 mvc 控制器发送 ajax 请求，但是在请求完成后，一个查询字符串被附加到我的 url 奇怪的行为或者我错过了什么。 我的 jquery 代码。

    function addstudent()
    {

        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        var imageuploaded = $("#imageupload")[0].files[0];
        var rememberme = $("#rememberme").is(":checked");
        var newsletter = $("#newsletter").is(":checked");
        var gender = $("input[name=gender]:checked").val();

        var studentDetails = new FormData();
        studentDetails.append("FirstName", firstname);
        studentDetails.append("LastName", lastname);
        studentDetails.append("ImageUploaded", imageuploaded);
        studentDetails.append("RememberMe", rememberme);
        studentDetails.append("IsSubscribed", newsletter);
        studentDetails.append("Gender", gender);

        $.ajax({
            url: "/Student/InsertStudent",
            type:"POST",
            dataType: "json",
            contentType: false,
            processData: false,
            data: studentDetails,
            success: onsuccessinsert,
            error:onerrorinsert

        });
        return false;
    }

视图有一个带有onclick功能的html按钮

<form class="form-horizontal" id="studentform" autocomplete="off">
<input type="hidden" id="hiddenid" />
<div class="form-group">
    <label for="firstname" class="col-sm-2 control-label"> Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="firstname" 
name="firstname" placeholder="Enter First Name"/>
    </div>
</div>
<div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">Last 
Name</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="lastname" 
placeholder="Enter Last Name"/>
    </div>
</div>
<div class="form-group">
    <label for="imageinput" class="col-sm-2 control-label">Image 
Upload</label>
    <div class="col-sm-10">
        <input type="file" class="form-control-file" id="imageupload" 
placeholder="Please Select a Image" 
accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp" />
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label><input type="checkbox" id="rememberme" value="true" > 
 Remember me</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label><input type="checkbox" id="newsletter"> Subscribed To 
 Newsletter</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="radio">
            <label><input type="radio" name="gender" value="male" 
id="gender1" /> Male</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="radio">
            <label><input type="radio" name="gender" value="female" 
id="gender2" /> Female</label>
        </div>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success" 
 onclick="addstudent()" id="insertbtn">Sign in</button>
    </div>
</div>

请求前我的 mvc url http://localhost:4149/Student 请求后我的 mvc url http://localhost:4149/Student?firstname=martin&gender=male

我不知道为什么它在 ajax 调用之后附加一个查询字符串。 我的 mvc 控制器代码。

    public JsonResult InsertStudent(StudentDetails studentDetails)
    {
        try
        {
            string filename = Guid.NewGuid() + 
studentDetails.ImageUploaded.FileName;
            string imagefullpath = Server.MapPath(@"~\ImageUploaded\") + 
filename;
            string imageshortpath = @"WebApplication1\ImageUploaded\" + 
filename;

            studentDetails.ImageFullUrl = imagefullpath;
            studentDetails.ImageShortUrl = imageshortpath;
            studentDetails.ImageName = filename;
            studentDetails.ImageUploaded.SaveAs(imagefullpath);

            return 
 Json(dbcontextStudentDetails.insertstudent(studentDetails), 
  JsonRequestBehavior.AllowGet);

        }
        catch (Exception message)
        {

            return Json(message);
        }
      }

Answer 1

实际上，您的按钮类型是 submit，并且您在同一个按钮上有 onclick 处理程序，并且您正在尝试在该处理程序中处理表单提交。对吧？

由于您的按钮类型是 submit，尽管您的按钮单击处理程序开始执行，但您的 HTML Form 将被提交，这就是您在浏览器中的 URL 发生更改的原因。

有两种解决方案。要么在HTML Form 上钩住你的onsubmit 事件，然后在处理程序中返回false，这样它就不会提交表单，然后你的按钮处理程序将使用ajax 发布数据，或者将按钮类型从submit 更改为button

<button type="button" class="btn btn-success" onclick="addstudent()" id="insertbtn">Sign in
</button>

希望对你有帮助。