douzhan3900 2017-08-24 21:01
浏览 109
已采纳

从提交ID进行ajax调用

I have a form in which currently posts to a hard coded php page in the action of the form, this works fine, it posts to the DB no problem, but where things get tricky for me is I don't want to post to a new page so I have opted to use ajax. So I got rid of the action field from the form and put in some jquery to make an ajax call. the issues I am having is well..it doesn't work :D. Could someone take a look at my js file and explain to me what I am doing wrong or what I should do?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">

  <form>
      <p>Comment</p>
      <textarea name= "comment" rows="6" cols="50"></textarea><br />
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>

$('#submit').on('click',function(){
       $.ajax({
            type        : 'POST',
            url         : 'comment.php',
            data        : formData,
            dataType    : 'json',
      })
   });

</div>
  • 写回答

1条回答 默认 最新

  • duanpo2037 2017-08-24 22:16
    关注

    You should handle the 'submit' event of the form over the 'click' event of the submit button. You should also return false; at the end of function to prevent the form from posting to a new page. You are handling the submit yourself. Also I would put the action attribute back on the form element for the rare occasion that JavaScript is disabled on the client. Give the form an id and target that. Your code is correct otherwise.

    HTML

        <form id="my-form" action="comment.php" method="post">
            <!-- input fields -->
        </form>
    

    JavaScript

        $('#my-form').on('submit', function(){ 
            // code...
    
            return false;
        });
    

    Providing the action attribute, as well as the method attribute, on the form element will make these available to access in your submit handler as well as providing a proper fallback for any JavaScript failures. That may not be necessary for this instance but may be helpful in the future.

    Your handler could now look something like this:

    JavaScript

        $('#my-form').on('submit', function(){ 
    
            // serialize the form
            var formData = $(this).serialize();
    
            $.ajax({
                type        : this.method,
                url         : this.action,
                data        : formData,
                dataType    : 'json'
            })
            .done(function (data) { 
                // do some stuff with 'data'
            })
            .fail(function (error) {
                // do some stuff with 'error'
            });
    
            return false;
        });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 streamingtool
  • ¥15 MATLAB图像问题
  • ¥20 树莓派5做人脸情感识别与反馈系统
  • ¥15 selenium 控制 chrome-for-testing 在 Linux 环境下报错 SessionNotCreatedException
  • ¥15 使用pyodbc操作SQL数据库
  • ¥15 MATLAB实现下列
  • ¥30 mininet可视化打不开.mn文件
  • ¥50 C# 全屏打开Edge浏览器
  • ¥80 WEBPACK性能优化
  • ¥30 python拟合回归分析