Question

我的Ajax调用有效。它按预期将数据发送到数据库。但是，在完成此任务后，它将不会调用成功或失败函数。它只是继续运行。我为ajax调用设置了超时但它不起作用。

我的html页面中有一个表单

<form class="form-horizontal" id="signupForm" role="form" method="post" name="signupForm" action="">
    <div class="form-group">
       <label class="col-xs-3 control-label" for="TextBoxUsername">Username:</label>
       <div class="col-xs-9"><input type="text" placeholder="username" id="TextBoxUsername" class="form-control" /></div>
    </div>
    <div class="form-group">
       <label class="col-xs-3 control-label" for="TextBoxPassword">Password:</label>
       <div class="col-xs-9"><input type="text" placeholder="password" id="TextBoxPassword" class="form-control" /></div>
    </div>
    <div class="form-group">
       <label class="col-xs-offset-5 control-label" for="selectImage" style="font-weight:bold;font-size:15px;">Choose Your Avatar</label>
    </div>
    <div class="content">
        // I used the Image-Picker jQuery plugin here to create a selection of images and show them as thumbnails
        <select name="selectImage" class="image-picker" id="selectImage" form="signupForm">
           <option class="grid-item" data-img-src="img1.png" value="img1.png">Image 1</option>
           <option class="grid-item" data-img-src="img2.png" value="img2.png">Image 2</option>
           <option class="grid-item" data-img-src="img3.png" value="img3.png">Image 3</option>
        </select>
    </div>
    <div class="form-group">
       <button type="submit" class="btn btn-default">Sign in</button>
    </div>
</form>

这是我的jQuery：

// this is my main jQuery function
$(function () {
   // this is my form submit function
   $("form").submit(function (e) {
        e.preventDefault(); // this stops the form from refreshing the page
        create();
   });
});

// this function creates an object to be added to the database
function create() {
   user = new Object();
   user.Username = $("#TextBoxUsername").val();
   user.Password = $("#TextBoxPassword").val();

   // here I am getting the value of the selected item from <select> div
   selectedImage = document.signupForm.selectImage.options[document.signupForm.selectImage.selectedIndex].value;

   // this is just to convert the image to base 64 string.
   var img = new Image();
   img.src = selectedImage;
   // draw canvas
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0,0);
   var imageURL = canvas.toDataURL();
   user.Image = imageURL;
   // end base 64 string conversion

   $.ajax({
      type: "Post",
      url: "api/signup", // this url goes to a controller, it works perfectly
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      processData: true,
      timeout: 3000, // does not do anything!
      success: function () {
        // this function is not being called!
        $("#lblstatus").text("User was created!");
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // this function is not being called either!
        errorRoutine(jqXHR);
    }
   });

}; // end create function

就像我说的那样，数据库接收数据就好了。但由于某种原因，这个ajax调用不会停止运行。如果我从调试器手动停止应用程序，我可以检查数据库，一切正常。我只需要这个ajax调用来完成。

Answer 1

尝试将类型更改为按钮并为其设置ID <button type="button" class="btn btn-default" id="submitbtn" >Sign in</button>并通过jquery click function $("#submitbtn").click(function () { create(); });

处理它

因此，即使您没有e.preventDefault（），页面也不会刷新;

因为您使用的是ajax，所以无论如何都不需要表单。因此，即使您没有form标记

，它也可以正常工作

Answer 2

我找到了这个小错字的罪魁祸首。

它在成功函数内部。我没有添加＆＃34;＃＆＃34;在＆＃34;（＆＃34; lblstatus＆＃34;）前面。应该是（＆＃34;＃lblstatus＆＃34;）。

傻傻的错误。

感谢所有建议。事实证明这是一个错字。

我的ajax帖子不会停止运行（C＃，JQuery，Ajax）

2 个答案: