Question

当我按下submit按钮时，该网站将刷新。但是我写了a AJAX code,所以网站不应该刷新，但确实如此。

但我无法找到错误。我在其他页面上也有相同的功能，在那里我没有任何问题。所以它有效，但我在这段代码中找不到错误：

$("#uploadlinkhoverForm").on('submit',(function(e) {
            e.preventDefault();
            $.ajax({
                url: "uploadHover.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data)
                {

                    var string = document.getElementById('userFileLinkHover1Image').value;
                    var letztePos;
                    var laengeString = string.length;

                    letztePos = string.lastIndexOf('\\');
                    var extString = string.slice(letztePos+1,laengeString);

                    var string2 = document.getElementById('userFileLinkHoverImage').value;
                    var letztePos2;
                    var laengeString2 = string2.length;

                    letztePos2 = string2.lastIndexOf('\\');
                    var extString2 = string2.slice(letztePos2+1,laengeString2);

                /*$("#targetLayerHover").html(data);
                $("#targetLayerHover2").html(data);*/

                //Bild einfügen
                //insertLinkHoverImage(extString,extString2,document.getElementById('userLinkHoverImage').value);

                },
                error: function() 
                {

                }           
           });
        }));

<div id = "imagehoverbar">
        <form id="uploadlinkhoverForm" action = "index.php?sendHover=1" method="post" >
            <table border=0 width=900px>
                <tr valign = top>
                    <td width=10px><img src = './images/blank.png' height=25px width=10px border=0></td>
                    <td width=425px>
                        <table border=0 height=1px width=700px>
                            <tr valign = middle>                            
                                <td width=370px><span class = "text_schriftart_bezeichnung"><span id="targetLayerHover">No Image</span>&nbsp;<input name="userHoverImage1" id = 'userFileLinkHover1Image' type="file"></span>&nbsp;</td>    
                                <td width=370px><span class = "text_schriftart_bezeichnung">Hover: <span id="targetLayerHover2"></span>&nbsp;<input name="userHoverImage" id = 'userFileLinkHoverImage' type="file"></span>&nbsp;</td>                          
                            </tr>
                            <tr>
                                <td width=370px><span class = "text_schriftart_bezeichnung"><span id="targetLayer">Verlinkung</span>&nbsp;<input name="userImageLink" id = 'userLinkHoverImage' type="text"></span>&nbsp;
                                <span class = "text_schriftart_bezeichnung"><input type="submit" id ='submitlinkimage2' value="Upload" class="btnSubmit upload_button" /></td>
                            </tr>
                        </table>
                    </td>
                    <td align = right><img src="./images/toolbar/pfeiloben_kl.png"  style="width:25px; height:25px;" alt="" onMouseDown = "ausblendenToolbar('imagehoverbar');"></td>
                </tr>
            </table>
        </form>
    </div>

为什么我的页面会刷新？

Answer 1

您实际在做的是将表单定向到/index.php?sendHover=1。因为这是你在标签中指示的内容

<form id="uploadlinkhoverForm" action = "index.php?sendHover=1" method="post" >

为什么不修改你的：

    <form id="uploadlinkhoverForm" onsubmit= "return sendform(this);">

从以下位置编辑您的JS：

$("#uploadlinkhoverForm").on('submit',(function(e) { 
  //ajax stuff....
}

到

function sendform(form){
  //ajax stuff...
}

使用AJAX提交表单不起作用

1 个答案: