当前位置：首页 > news >正文

PbootCMS使用Ajax无刷新提交留言及表单

news 2026/5/12 18:51:46

对留言表单和 Ajax 提交代码的详细解析与优化建议：

1. 留言表单结构

<form onsubmit="return submsg(this);">联系人<input type="text" name="contacts" required id="contacts">手　机<input type="text" name="mobile" required id="mobile">内　容<textarea name="content" id="content"></textarea>验证码<input type="text" name="checkcode" required id="checkcode"><img title="点击刷新" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" /><button type="submit">提交留言</button>
</form>

功能说明

onsubmit="return submsg(this);"
表单提交时调用 submsg 函数，通过返回值控制是否继续提交。如果返回 false，则阻止默认提交行为。
必填字段 (required)
- contacts（联系人）、mobile（手机）和 checkcode（验证码）是必填项。
- 如果未填写这些字段，浏览器会提示用户完成输入。
验证码刷新
- <img> 标签显示验证码图片。
- 点击图片时，通过 onclick 事件动态刷新验证码。

2. Ajax 提交代码

<script>
function submsg(obj) {
    var url = '{pboot:msgaction}'; // 如果是自定义表单，则使用 {pboot:form fcode=*}
    var contacts = $(obj).find("#contacts").val();
    var mobile = $(obj).find("#mobile").val();
    var content = $(obj).find("#content").val();
    var checkcode = $(obj).find("#checkcode").val();

    $.ajax({
        type: 'POST',
        url: url,
        dataType: 'json',
        data: {
            contacts: contacts,
            mobile: mobile,
            content: content,
            checkcode: checkcode
        },
        success: function (response, status) {
            if (response.code) {
                alert("谢谢您的反馈，我们会尽快联系您！");
                $(obj)[0].reset(); // 清空表单
            } else {
                alert(response.data); // 显示错误信息
            }
        },
        error: function (xhr, status, error) {
            alert('返回数据异常！');
        }
    });
    return false; // 阻止表单默认提交
}
</script>

功能解析

获取表单数据
- 使用 jQuery 的 $(obj).find() 方法从表单中提取用户输入的值。
- 包括联系人、手机号、留言内容和验证码。
Ajax 请求
- 请求类型：POST
- 请求地址：{pboot:msgaction} 是 PbootCMS 提供的留言提交接口。如果是自定义表单，需替换为 {pboot:form fcode=*}，其中 fcode 是表单的唯一标识。
- 数据格式：dataType: 'json' 表示期望服务器返回 JSON 格式的数据。
成功回调
- 如果服务器返回 response.code === true，表示提交成功，弹出提示并清空表单。
- 如果提交失败，显示服务器返回的错误信息 response.data。
错误处理
- 如果请求失败（如网络问题或服务器异常），弹出通用错误提示。
阻止默认提交
- return false; 阻止表单的默认提交行为，确保所有操作通过 Ajax 完成。