douzhan3900 2017-08-24 13: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 14: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;
        });
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥30 在CodBlock上用c++语言运行
  • ¥15 求C6748 IIC EEPROM程序固化烧写算法
  • ¥50 关于#php#的问题,请各位专家解答!
  • ¥15 python 3.8.0版本,安装官方库ibm_db遇到问题,提示找不到ibm_db模块。如何解决?
  • ¥15 TMUXHS4412如何防止静电,
  • ¥30 Metashape软件中如何将建模后的图像中的植被与庄稼点云删除
  • ¥20 机械振动学课后习题求解答
  • ¥15 IEC61850 客户端和服务端的通讯机制
  • ¥15 MAX98357a(关键词-播放音频)
  • ¥15 Linux误删文件,请求帮助
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部