Javascript Ajax表单提交将查询字符串附加到url并重新加载页面_Javascript_Jquery_Ajax

Javascript Ajax表单提交将查询字符串附加到url并重新加载页面

javascript jquery ajax

Javascript Ajax表单提交将查询字符串附加到url并重新加载页面,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个ajax脚本，它在单击按钮时提交表单，该脚本在提交时将表单数据附加到URL，这在任何标准下都不安全，该脚本适用于除当前正在调试的表单之外的其他表单。只是用一个令人烦恼的长URL重新加载页面已编辑：已将form method=“post”添加到表单中，但仍不起作用。解决url问题这是我的ajax脚本： $("form#PostItemz").click(function(){ var formData = new FormData(this);

我有一个ajax脚本，它在单击按钮时提交表单，该脚本在提交时将表单数据附加到URL，这在任何标准下都不安全，该脚本适用于除当前正在调试的表单之外的其他表单。只是用一个令人烦恼的长URL重新加载页面

已编辑：已将form method=“post”添加到表单中，但仍不起作用。解决url问题

这是我的ajax脚本：

$("form#PostItemz").click(function(){

            var formData = new FormData(this);

            $.ajax({
                url: 'inc/modules/post_data.php',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                   alert(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        });

这是我的html表单：

             <form method="post"  id="PostItemz" class="post publisher-box" >

       <div class="panel panel-white post panel-shadow">
          <div id="post-textarea">
                       <img class="post-avatar" src="profile/maxwell/images (1).jpg">
                      <i class="fa fa-spinner fa-spin" id="loading_indicator"></i>
             <textarea onkeyup="textAreaAdjust(this, 70)" onclick="Wo_ShowPosInfo();" name="postText" class="form-control postText" cols="10" rows="3" placeholder="What&#039;s new ? @groups " dir="auto"></textarea> 
          </div>

    <div id="post-status">

      </div>

                <div class="publisher-hidden-option" id="video-form">
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-video-camera"></i>
                <input name="videocount" id="video_value" type="text" class="form-control" readonly>
             </div>
          </div>
                   <!-- ###music widget -->  
                   <div class="publisher-hidden-option" id="music-form"> 
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-music"></i> 
               <input name="musiccount" type="text" class="form-control" id="audio_value"  readonly>
             </div>
             <div class="create-album pull-right" onclick="Wo_OpenAlbum();">
               <div class="create-text">
                 Add to album     <input name="OkAlbum" value="AddToAlbum" type="checkbox" />      </div>
             </div> 
                <div class="clear"></div>
          </div>
          <div class="publisher-hidden-option" id="photo-form" >
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-file-image-o"></i>
                <input name="phtoscount" id="photo_value" type="text" class="form-control" readonly>
             </div>
             <div class="create-album pull-right" onclick="Wo_OpenAlbum();">
               <div class="create-text">
                 Add to album     <input name="OkAlbum" value="AddToAlbum" type="checkbox" />      </div>
             </div>
             <div class="clear"></div>  
          </div>
          <div class="publisher-hidden-option" id="file-form">
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-file-text-o"></i>
                <input name="filename" id = "file_value" type="text" class="form-control" readonly>
             </div>
          </div>
          <div id="results"></div>
          <div class="publisher-hidden-option">
             <div id="progress">
                <span id="percent">0%</span>
                <div class="progress">
                 <div id="bar" class="progress-bar progress-bar-striped active"></div> 
                </div>
                <div class="clear"></div>
             </div>
          </div>
          <div class="publisher-box-footer">
             <div class="row col-lg-2 pull-right">
                <button class="form-control btn btn-main">
                <i class="fa fa-edit progress-icon "></i> <span id="postbutton">Post</span></button>
             </div>
            <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-camera" ></i><input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg, image/pjpeg" name="postPhotos[]" multiple>
                      </span>
                   </div> 
                </div>
             </div>

                      <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-video-camera"></i><input type="file" onchange="xVideo();" id="publisher-video" name="postVideo" accept="video/*">
                      </span>
                   </div>
                </div>
             </div>   
             <div class="row pull-left emo-form" >
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-smile-o "></i>
                      </span>
                   </div>
                </div>
             </div>
              <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <div class="dropdown">
      <button class="btn btn-default btn-file dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
      <ul class="dropdown-menu">
        <li>
                   <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-file-text-o"></i><input type="file" onchange="xFile();" id="publisher-file" name="postFile">
                      </span>
                   </div>
                </div>
             </div>

                      <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-music"></i><input type="file" onchange="xAudio();" id="publisher-music" name="postMusic" accept="audio/*">
                      </span>

                   </div>
                </div>
             </div>
                 </li>
      </ul>
    </div>
                   </div>
                </div>
             </div>


             <div class="input-group">
                <div class="pull-right charsLeft-post"><span id="charsLeft"></span></div>
             </div>
             <div id="status"></div>
                      <div class="row pull-right">
                <div class="poster-left-buttons">
                   <div class="publisher-hidden-option inputsm">
                      <select name="postPrivacy" class="form-control inputsm">
                                                 <option value="3" selected>My Groups</option>
                            <option value="0" >Everyone</option>
                                                    <option value="1" disabled>Private</option>
                                                                   </select>
                   </div>
                </div>
             </div>
                      <div class="clear"></div>
          </div>
       </div>
             <input type="hidden" name="hash_id" value="c1183f16ab610230ebe8a9bcb331d2d6f7ebbf66">
       <input type="hidden" name="postRecord" value="" id="postRecord">
    </form>


添加到相册
添加到相册
0%
邮递




我的团队
每个人
私有的

inc/modules/post_data.php上的脚本所做的只是回显“hello world”；但似乎什么都不起作用。

不要忘记添加一个

事件.preventDefault（）

行，以避免浏览器执行默认行为，即在提交时重新加载页面

试试像这样的东西

$("#PostItemz").on('submit', function(event){
event.preventDefault()
var formData = new FormData(this);

    $.ajax({
        url: 'inc/modules/post_data.php',
        type: 'POST',
        data: formData,
        success: function (data) {
           alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

});

这至少可以解决重新加载问题。另外，如果要将表单作为目标，请使用submit事件：

$（“#form_id”）。在（'submit'，function（）{//do stuff}）上使用。如果您想将按钮本身作为目标，那么您可以执行$（“#button_id”）。在（'click'，function（）{//do stuff}）
，但对于表单，我建议第一种解决方案
编辑：如果将代码放在头部，它会在页面其余部分之前加载，从而尝试绑定到不存在的ID（在处理脚本时）。要避免这种情况，您应该：

将代码放在正文的末尾，就在
标记的前面
使用$（function（）{//stuff}）（缩写为
$（document）.on（'ready'，function（）{//do stuff}））来结束您的
jquery代码，本质上告诉浏览器：“等待整个页面
在执行此脚本之前加载“

在您的案例中，后面的代码翻译为以下代码：
$(function() {
$("#PostItemz").on('submit', function(event){
    event.preventDefault()
    var formData = new FormData(this);

        $.ajax({
            url: 'inc/modules/post_data.php',
            type: 'POST',
            data: formData,
            success: function (data) {
               alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

    });

});

不要忘记添加事件.preventDefault（）
行，以避免浏览器执行默认行为，即在提交时重新加载页面
试试像这样的东西
$("#PostItemz").on('submit', function(event){
event.preventDefault()
var formData = new FormData(this);

    $.ajax({
        url: 'inc/modules/post_data.php',
        type: 'POST',
        data: formData,
        success: function (data) {
           alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

});

这至少可以解决重新加载问题。另外，如果要将表单作为目标，请使用submit事件：$（“#form_id”）。在（'submit'，function（）{//do stuff}）上使用。如果您想将按钮本身作为目标，那么您可以执行$（“#button_id”）。在（'click'，function（）{//do stuff}）
，但对于表单，我建议第一种解决方案
编辑：如果将代码放在头部，它会在页面其余部分之前加载，从而尝试绑定到不存在的ID（在处理脚本时）。要避免这种情况，您应该：

将代码放在正文的末尾，就在
标记的前面
使用$（function（）{//stuff}）（缩写为
$（document）.on（'ready'，function（）{//do stuff}））来结束您的
jquery代码，本质上告诉浏览器：“等待整个页面
在执行此脚本之前加载“

在您的案例中，后面的代码翻译为以下代码：
$(function() {
$("#PostItemz").on('submit', function(event){
    event.preventDefault()
    var formData = new FormData(this);

        $.ajax({
            url: 'inc/modules/post_data.php',
            type: 'POST',
            data: formData,
            success: function (data) {
               alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

    });

});

您没有单击表单，而是提交表单
$("#PostItemz").on('submit', function(){

    var formData = new FormData(this);

    $.ajax({
        url     : 'inc/modules/post_data.php',
        type    : 'POST',
        data    : formData,
        success : function (data) {
           console.log(data);
        },
        contentType: false,
        processData: false
    });

    return false;
});

您没有单击表单，而是提交表单
$("#PostItemz").on('submit', function(){

    var formData = new FormData(this);

    $.ajax({
        url     : 'inc/modules/post_data.php',
        type    : 'POST',
        data    : formData,
        success : function (data) {
           console.log(data);
        },
        contentType: false,
        processData: false
    });

    return false;
});

你能添加“令人烦恼的长URL”吗？http://localhost/bridgoo/bridgoo%20-%20Copy%20（2）.php？postText=zhhzhzh&videocount=&musiccount=&phtoscoount=&filename=&postPhotos%5B%5D=&postVideo=&postFile=&postMusic=&postPrivacy=3&hash_id=c1183f16ab610230ebe8a9bcb331d2d6f7ebbf66&postRecord=
Can