Question

我正在尝试从jquery弹出电子邮件中显示特定帖子的页面发送一些自定义帖子数据。

目前，我有一个完整的HTML表单和JQuery模式框设置。

这是这个js代码：

jQuery(document).ready(function($){
var email = $( "#email" ),
message = $( "#message" ),
allFields = $( [] ).add( email ).add( message ),
tips = $( ".validateTips" );

$( ".email-course" )
        .button()
        .click(function() {
                $( "#dialog-form" ).dialog( "open" );
});

$( "#dialog-form" ).dialog({
    autoOpen: false,
modal: true,
width: 550,
height:260,
resizable: false,
show: 'fade',
title: 'Email course',
    buttons: {
    "Send": function() {

        //Need help here
    },
    Cancel: function() {
    $( this ).dialog( "close" );
    }
    },
    close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
    }
});
});

HTML表单：

<div id="dialog-form" title="Email this course">
    <form>
        <fieldset>
            <label for="email">To:</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="email">From:</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="message">Message (optional)</label>
            <input type="text" name="message" id="message" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>

和按钮：

<div class="right"><button class="email-course">Email this course</button></div>

我的问题是如何从表单中读取数据，而且我将不得不从加载它们的页面中提取一些带有ID的帖子数据并通过Wordpress的wp_email发送它我假设？我还必须将“消息（可选）”与特定帖子ID的数据合并。我需要的任何其他信息请告诉我。提前致谢。

Answer 1

<强>背景

jQuery有一个.serialize()方法：

将一组表单元素编码为字符串以供提交。

使用此方法，您可以序列化所有字段值，而无需单独收集它们。

例如，你可以这样做：

$('form').serialize()

您将获得一个包含所有收集的表单字段的字符串＆amp;值，然后您可以将此字符串传递给data: {}请求中$.ajax对象中的服务器。

jqAPI

上的

.serialize()文档

填写发送回调：

"Send": function() {
     //Need help here

     $.ajax({
         data        : $('#dialog-form form').serialize(),
         error       : function (jqXHR, textStatus:string, errorThrown:string) {
                     if (errorThrown) {
                           // Show message.
                     }
           },
         success     : function (response_from_server:ResponseFromServer, statusText:string, xhr) {
                     // Do post-processing here.
           },
         type        : 'POST',
         url         : ajaxurl
    });
},

下面：

ajaxurl：由WordPress设置的javascrip全局变量，用于指向'/wp-admin/admin-ajax.php'的AJAX查询

$（'＃dialog-form form'）。serialize（）：此方法将序列化表单中存在的所有Successfull HTML控件，并将其作为数据附加到AJAX查询。

这里只缺少nonce检查以验证AJAX请求，我没有把它放在那里使代码变得简单。

然后在WordPress PHP后端，您必须捕获序列化该数据，以便根据需要处理它。

希望它有所帮助。

通过Wordpress中的JQuery / Ajax发送自定义数据

1 个答案: