AJAX：表单提交以发表评论 [英] AJAX: Form Submit to post comments

查看：95
本文介绍了AJAX：表单提交以发表评论的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个问题，在没有页面刷新（就地）的情况下让表单提交并显示评论，但当我点击按钮时，它会将我带到页面的顶部，但不会执行任何操作，不会插入到数据库中，因此不会在页面中显示注释。



它应该将注释放置在具有淡化效果的适当位置。 / p>

脚本的积分和演示：这里是原始脚本



上面提供的脚本提供了它，如果我尝试但我不得不修改它以适应我的需求，这就是我的所需。



表单： 

 < div class =comment-form> 
< form id =formaction =method =post> 
< div class =top-form> 
< span class =父母名称> 
< input class =fieldtype =hiddenname =Namevalue =<？php echo $ _SESSION [UserName];？> /> 
< input class =fieldtype =textname =Namevalue =<？php echo $ _SESSION [UserName];？>禁用= 禁用 > 
< / span> 
< span class =父母名称> 
< input class =fieldtype =hiddenname =IDvalue =<？php echo $ _SESSION [UserID];？> /> 
< input class =fieldtype =textname =IDvalue =<？php echo $ _SESSION [UserID];？>禁用= 禁用 > 
< / span> 
< span class =parent last> 
< input class =fieldtype =hiddenname =PageIDvalue =<？php echo $ _GET ['PageID'];？> /> 
< input class =fieldtype =textname =PageIDvalue =<？php echo $ _GET ['PageID'];？>禁用= 禁用 > 
< / span> 
< div class =clear>< / div> 
< / div> 
< div class =bottom-form> 
< label>选择一个选项< / label> 
< select id =commentboxname =commentclass =bs-select form-control> 
<选项禁用选定值> - 选项 - < / option> 
< option value =第一选项>第一选项< / option> 
< option value =第二选项>第二选项< / option> 
< option value =第三选项>第三选项< / option> 
< / select> 
< button class =btn btn-icon submitname =btn-sumbittype =submitid =submitvalue =发布消息>< span class =icon> ;< / span>发布信息< / button> 
< / div> 
< / form> 
< / div> 
 
< div class =comments> 
< div class =section-title> 
< h3>讯息< / h3> 
< / div> 
< ul class =level-1> 
< div class =comment-block> 
<？php echo $ postingcomments; ？> <！ - 加载页面加载之前的评论。有用。 - > 
< / div> 
< / ul> 
< / div>

脚本 



 < script> 
位于与表单相同的页面中。 
 $（document）.ready（function（）{
 var form = $（'form'）; 
 var submit = $（'＃submit'）; 
 
 form.on（'btn-submit'，function（e）{
 //防止默认操作
 e.preventDefault（）; 
 //发送ajax请求
 $ .ajax（{
 url：'data / queries / comment-insert.php'，
 type：'POST'，
 cache：false，
 data：form.serialize ），//形成序列化数据
 beforeSend：function（）{
 //更改提交按钮值文本并禁用它
 submit.val（'Posting ...'）。attr（'禁用'，'禁用'）; 
}，
成功：函数（数据）{
 //附加fadeIn参见http://stackoverflow.com/a/978731 
 var item = $（data）.hide（）。fadeIn（800）; 
 $（'。comment-block'）。append（item）; 
 
 // reset form and button 
 form.trigger（'reset'）; 
 submit.val（'Post Message'）。removeAttr（'disabled'）; 
}，
错误：函数（e）{
 alert（e）; 
} 
}）; 
}）; 
}）; 
< / script>

查询

comment-insert.php 

 <？php 
 if（isset（$ _SERVER ['HTTP_X_REQUESTED_WITH' ]））：
 include_once'include / dbconfig.php'; 
 include_once'include / dbconnection.php'; 
 $ conn = dbconnect（）; 
 
 if（！empty（$ _ POST ['comment']））{
 $ Name = mysqli_real_escape_string（$ conn，$ _POST ['Name']）; 
 $ PageID = mysqli_real_escape_string（$ conn，$ _POST ['PageID']）; 
 $ ID = mysqli_real_escape_string（$ conn，$ _POST ['ID']）; 
 $ Comment = mysqli_real_escape_string（$ conn，$ _POST ['comment']）; 
 
 $ sql =INSERT INTO comments 
（PageID，PosterID，PosterName，PostDate，Comment）
 VALUES 
（'PageID'，'$ ID'， '$ Name'，now（），'$ Comment'）; 
 $ b $ mysqli_query（$ conn，$ sql）或死（Error：.mysqli_error（$ conn））; 
} 
？> 
 
< li>< span class ='comment'> 
< span class ='picture'> 
< span>< img src ='users / images /<？php echo $ _SESSION ['Image']？>'>< / span> 
< / span> 
< span class ='content'>< span class ='title'>< b><？php echo $ Name？>< / b> ;,说：< / span> ;<？><？php echo $ Comment？>< / span> 
< span class ='clear'>< / span> 
< / span> 
< / li> 
 
<？php 
 mysqli_close（$ conn）; 
 endif？>


解决方案


  $（document）.ready（function（）{
 // var form = $（'＃form'）; 
 // （'＃submit'）; 
 
 $（'＃submit'）。on（'click'，function（e）{
 e.preventDefault（）; 
 //其余的代码放在这里
}）
}）;


I'm having an issue getting a form to submit and display the comment without the page refreshing (in-place) but when I click on the button, it takes me to the top of the page but does not perform any actions, does not insert into the database and thus does not display the comments in the page.

It is supposed to place the comment in the appropriate place with a fade effect.

Credits and Demo for the script: Original Script Here

The script provided int he link above, works if I try it as it comes but I had to modify it to fit my needs and this is what I have.

The Form:

<div class="comment-form">
    <form id="form" action="" method="post">
        <div class="top-form">
            <span class="parent name">
                <input class="field" type="hidden" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" />
                <input class="field" type="text" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" disabled="disabled">
            </span>
            <span class="parent name">
                <input class="field" type="hidden" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" />
                <input class="field" type="text" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" disabled="disabled"> 
            </span>
            <span class="parent last">
                <input class="field" type="hidden" name="PageID" value="<?php echo $_GET['PageID']; ?>" />
                <input class="field" type="text" name="PageID" value="<?php echo $_GET['PageID']; ?>" disabled="disabled">  
            </span>
            <div class="clear"></div>
        </div>
        <div class="bottom-form">
        <label>Choose an Option</label>
        <select id="commentbox" name="comment" class="bs-select form-control">
            <option disabled selected value> -- Options -- </option>
            <option value="First Option">First Option</option>
            <option value="Second Option">Second Option</option>
            <option value="Third Option">Third Option</option>
        </select>
        <button class="btn btn-icon submit" name="btn-sumbit" type="submit" id="submit" value="Post Message"><span class="icon"></span>Post Message</button>
        </div>
    </form>
</div>

<div class="comments">
    <div class="section-title">
        <h3>Messages</h3>
    </div>
    <ul class="level-1">
    <div class="comment-block">
    <?php echo $postedcomments; ?> <!-- loads previous comments on page load. it works. -->
    </div>
    </ul>
</div>

The script

located in the same page as the form.

<script>
$(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');

  form.on('btn-submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
      url: 'data/queries/comment-insert.php',
      type: 'POST',
      cache: false,
      data: form.serialize(), //form serialized data
      beforeSend: function(){
        // change submit button value text and disabled it
        submit.val('Posting...').attr('disabled', 'disabled');
      },
      success: function(data){
        // Append with fadeIn see http://stackoverflow.com/a/978731
        var item = $(data).hide().fadeIn(800);
        $('.comment-block').append(item);

        // reset form and button
        form.trigger('reset');
        submit.val('Post Message').removeAttr('disabled');
      },
      error: function(e){
        alert(e);
      }
    });
  });
});
</script>

The Query

comment-insert.php

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include_once 'include/dbconfig.php';
include_once 'include/dbconnection.php';
$conn = dbconnect();

if (!empty($_POST['comment'])) {
        $Name = mysqli_real_escape_string($conn, $_POST['Name']);
        $PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
        $ID = mysqli_real_escape_string($conn, $_POST['ID']);
        $Comment = mysqli_real_escape_string($conn, $_POST['comment']);

        $sql = "INSERT INTO comments
        (PageID, PosterID, PosterName, PostDate, Comment)
        VALUES
        ('$PageID', '$ID', '$Name', now(), '$Comment')";

        mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));    
}
?>

<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $_SESSION['Image'] ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>

<?php
    mysqli_close($conn);
endif?>

解决方案

This works:

$(document).ready(function() {
    //var form = $('#form');
    //var submit = $('#submit');

    $('#submit').on('click', function(e) {
        e.preventDefault(); 
        // the rest of your code goes here
    })
});

这篇关于AJAX：表单提交以发表评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆