AJAX генерирует строку запроса автоматически после публикации

Question

Я отправляю ajax-запрос на контроллер mvc, но после завершения запроса к моему 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;
    }

вид имеет HTML-кнопку с функцией onclick

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

URL моего Mvc до запроса 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 в браузере будет изменен.

Есть два решения. либо подключите ваше событие onsubmit к HTML Form, и в обработчике, и верните false, чтобы он не отправлял форму, а затем обработчик кнопки будет публиковать данные, используя ajax, или другое - измените тип кнопки с submit на button

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

Надеюсь, это поможет.