Question

我的ajax没有在表单上运行...当我提交表单时，它什么都不执行..请帮忙。

 $( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'u_mainslides.php',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } ); 
</script>    

<form action=""   method="post" id="my-form" >    
     <label for="title">Title:</label>
     <input type="text" class="form-control" id="title" name="title" placeholder="mainslides/08">  
     <label >Upload:</label>
     <input type="file" class="filestyle" data-buttonName="btn-primary"   name="file">
      <input type="submit"  value="Done" name="Submit" id="submit"/>   
    </form>

Answer 1

添加enctype并附加表单文本数据。你的代码应该是这样的：

$( '#my-form' )
.submit( function( e ) {

var fd=new FormData(document.getElementById("my-form"));
fd.append("title",$(".form-control").val());

$.ajax( {
  url: 'u_mainslides.php',
  type: 'POST',
  data: fd,
  enctype: 'multipart/form-data',
  processData: false,
  contentType: false,
  success:function(data){
    alert(data);
  }
} );
e.preventDefault();
} );

Answer 2

您还可以在done()

中添加fail()和$.ajax()个功能

$('#submit').click(function (evt) {
    evt.preventDefault();
   var data = new FormData($('#my-form')[0]);
   $.ajax({
            type: 'POST',
            url: 'u_mainslides.php',
            data: data,
            cache: false,
            contentType: false,
            processData: false
        }).done(function (data) {
          // returned data
          console.log(data);
       }).fail(function (){
         //handle fail
       });
 }

为什么我的ajax没有在表单上运行提交？

2 个答案: