如何在不刷新整个页面的情况下提交表单

时间:2017-06-15 15:34:12

标签: javascript php ajax

我以前做过这个,但是现在我不知道我要去提交一个表格而不刷新页面,但我的整个仍然刷新了我到目前为止有人应该告诉我的代码我要去错。

test.php的

<div class="preview_d_p" id="preview_d_p">
<div class="preview">
    <div class="p_preview">
       <div id="p_p_image"><div id="myimage"></div></div>
    </div>
    <div id="lab"> <label for="photo_upload">upload</label></div>
      <form enctype="multipart/form-data">
      <input type="file" id="photo_upload" name="image_upload">
    <input type="submit" value="save" id="insert_img" onclick="return loadimage()">
    </form>
</div></div>


<script>
function loadimage(){
       var image = documentElement('photo_upload').value;



     $.ajax({
         type:'post',
         url:'profile.php',
         data:{
            image:image

         },
         cache:false,
          success: function(html){

          }

     });

       return false;
    }
</script>

2 个答案:

答案 0 :(得分:1)

我的建议是将输入更改为按钮(键入=&#34;按钮&#34;) - 我更喜欢按钮输入,因为它们更容易设置样式。

但你可以做这样的事情来管理提交数据而不刷新页面:

HTML示例(不是您的HTML副本):

<div id="container">
    <form action="" method="post" id="myForm">
        <input type="text" value="hello world!" />
    </form>

    <!-- what's great about buttons, is that you don't have to place inside the form tags -->
    <button type="button" id="submitBtn">

JS匹配

$(document).ready(function()
{
    $('#submitBtn').on('click', function()
    {
        //ajaxy stuff
        //will show the success callback function though:
        success: function(res)
                 {
                     $('#container').html(res);   
                 }
    })
});

如果您的帖子脚本返回html,那么这应该有用。如果不是,请告诉我:))

答案 1 :(得分:0)

我使用formdata解决了这个问题,将图像文件发送到服务器

$(document).on("submit","form",function(e){
    e.preventDefault();

    var file = $("#product-file-i").val();
    var p = $("#product-upload-f").children("input[name=name]").val();

 $.ajax({
             type:"post",
             url:"profile.php",
             data:new FormData(this),
             contentType:false,
             processData:false,
             cache:false,
             success: function(feedback){
              alert(feedback);

             },
             error: function(){

             }

          });


});