Question

基本上，这是从数据库加载更多结果并将它们放在页面上。问题是，一旦表单提交一次，它似乎不允许提交第二，第三等时间。

HTML：

<div class="network-load-more">
    <div class="load-form">
        <form class="network-load-more-form" method="POST" action="javascript:void(0)">
            <input type="hidden" name="load_number" value="1">
            <input type="submit" value="LOAD MORE">
        </form>
    </div>
</div>

JS：

$(".network-load-more-form").submit(function(submit) {
    submit.preventDefault();
    $.ajax({
       type: "POST",
       url: "/dev/new/scripts/network_updates_load_more.php",
       data: $(this).serialize(),
       datatype: 'json',
       cache: false,
       success: function(forminfo){
        $.each(forminfo.network_videos, function(name,value) {
            $(".network-videos").append('<div class="network-video-row"><div class="network-user-avatar"><img src="' + value.profile_url + '" width="77px" height="auto"><br/>' + value.first_name +'</div><div class="network-user-video-thumb"><img src="' + value.video_url + '" width="77px" height="auto"></div><div class="network-video-title">' + value.video_title + '<div class="network-video-date">' + value.upload_date + '</div></div></div>').fadeIn(1000);
        });
        $(".load-form").remove();
        $(".network-load-more").append('<div class="load-form"><div class="network-load-more"><form class="network-load-more-form" method="POST" action="javascript:void(0)"><input type="hidden" name="load_number" value="' + forminfo.new_loader + '"><input type="submit" value="LOAD MORE"></form></div></div>');
       },
       error: function(){
        alert("failed to load more");
       }
     });
 });

network_updates_load_more.php：

<?php
header('Content-Type: application/json');
require('config.php');
require('checklogin.php');

$load_number = $_POST['load_number'];
$new_load_number = ($load_number + 1);

$loader = (($load_number*10) + 1);

$mysqlicon = mysqli_connect($db_host, $db_username, $db_password, $db_name);
$videos_array = array(
    'new_loader' => $new_load_number,
    'network_videos' => array()
);

//network videos
$get_network_videos = mysqli_query($mysqlicon, "SELECT videoTopics.ID, videoTopics.userID, videoTopics.uploadDate, videoTopics.videoURL, videoTopics.videoTitle, videoTopics.numberPlays, users.firstName, users.profileVideoURL FROM videoTopics JOIN users ON users.id=videoTopics.userID WHERE broadcastType='Public' ORDER BY uploadDate DESC LIMIT $loader,10");
while ($network_videos_row = mysqli_fetch_array($get_network_videos)) {

    $videos = array(
        'video_id' => $network_videos_row['ID'],
        'network_user_id' => $network_videos_row['userID'],
        'upload_date' => date("F j, Y, g:i a", strtotime($network_videos_row['uploadDate'])),
        'video_url' => $network_videos_row['videoURL'],
        'video_title' => stripslashes($network_videos_row['videoTitle']),
        'number_plays' => $network_videos_row['numberPlays'],
        'first_name' => $network_videos_row['firstName'],
        'profile_url' => $network_videos_row['profileVideoURL'],
        'new_load_number' => $new_load_number
    );

    array_push($videos_array['network_videos'], $videos);
}

echo json_encode($videos_array);

mysqli_close($mysqlicon);
?>

Answer 1

在ajax之后，您再次删除并附加表单，因此您需要删除事件。

替换：

$(".network-load-more-form").submit(function(submit) {

与

$("body").on("submit", ".network-load-more-form", function(submit) {

编辑：

您可以用$（“。network-load-more”）替换$（“body”）以获得更好的性能。

Answer 2

我不知道HTML / JS的其余部分是什么样的，但这看起来很可疑。

$(".load-form").remove();

允许多个ajax表单提交

2 个答案: