学习ThinkPHP3.2.2:video11，对index.js中提交按钮单击事件的修改

本文介绍了一个具体的前端实现案例，通过JavaScript实现了表单提交前的验证逻辑，并在验证成功后通过Ajax向服务器发送POST请求。文章详细展示了如何使用jQuery选择器获取输入框的值并进行非空检查，以及如何根据服务器返回的数据动态生成HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$( '#send-btn' ).click( function () {

    //alert(handleUrl);

    var username = $( 'input[name=username]' );

    //

    var content = $( 'textarea[name=content]' );

    if (username.val() == ''){

        alert('用户名不能为空。');

        username.focus();

        return;

    }

    if (content.val() == ''){

        alert('内容不能为空。');

        content.focus();

        reuturn;

    }  

    $.post(handleUrl, {username : username.val(), content : content.val()},

    function(data){

        if (data.status){

            var str = '<dl class="paper a1">';

            str += '<dt>';

            str += '<span class="username">' + data.username + '</span>';

            str += '<span class="num">NO.' + data.id + '</span>';

            str += '</dt>';

            str += '<dd class="content">' + data.content + '</dd>';

            str += '<dd class="bottom">';

            str += '<span class="time">' + data.time + '</span>';

            str += '<a href="" class="close"></a>';

            str += '</dd>';

            str += '</dl>';      

            $( '#main' ).append(str);

            $( '#close' ).click();

        }else{

            alert('添加失败。');

        }

    }, 'json');

});