用AJAX提交文章后,用AJAX显示文章


Display Post with AJAX, after submitting post with AJAX

用前端表单提交新文章,使用:

    http://malsup.github.com/jquery.form.js
  • 默认WP jQuery (wp_enqueue_script("jquery");)

  • 下面的代码提交表单(新帖子)

    jQuery(文档)时函数(){jQuery("[id ^ = cred_form_1614]").ajaxForm(函数(){提醒("感谢您的评论!");});});

这提交和保存我的帖子到WordPress数据库很好,正确。

是否有一个很好的方法,现在得到(新插入的)Post形式的DB和显示它,而不是保持显示我的形式?

我可以通过重新加载整个页面来实现它,但我想用AJAX

显示新帖子

我明白我应该改变"成功"。当前为"alert"到其他东西,比如"display post"?

我不确定如何在jQuery代码中插入(我想我需要这个)WP查询?我可以用PHP,但不能用jQuery/AJAX

有人有这方面的经验吗?

基本上,它必须"update"显示当前查看的页面(我的表单所在的页面),并显示帖子。

按要求,这是我的表单(渲染)HTML创建的帖子:

<form enctype="multipart/form-data" id="cred_form_1614_1" class="cred-form cred-keep-original" action="/site/cred-ajax/?_tt=1436915840" method="post">
<label id="wpt-form-message" data-message-single="The post was not saved because of the following problem:<br />%PROBLEMS_UL_LIST" data-message-plural="The post was not saved because of the following %NN problems:<br />%PROBLEMS_UL_LIST" style="display:none;" class="wpt-top-form-error wpt-form-error">test</label>
<div class="cred-field cred-field-post_title">
    <label class="cred-label">
Post Name
</label>
<div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textfield-post_title">
<input id="cred_form_1614_1-textfield-1-1436915839" name="post_title" value="" data-wpt-validate="{&quot;required&quot;:{&quot;args&quot;:{&quot;1&quot;:true},&quot;message&quot;:&quot;This field is required&quot;}}" data-wpt-field-title="Post Name" class="wpt-form-textfield form-textfield form-control js-wpt-validate" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-1-1436915839" data-wpt-name="post_title" type="text">
</div>
</div>
<div class="cred-field cred-field-post_content">
    <label class="cred-label">
Body Content
</label>
<div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="wysiwyg-post_content"><div id="wp-cred_form_1614_1_post_content-wrap" class="wp-core-ui wp-editor-wrap html-active"><div id="wp-cred_form_1614_1_post_content-editor-tools" class="wp-editor-tools hide-if-no-js"><div class="wp-editor-tabs"><button type="button" id="cred_form_1614_1_post_content-tmce" class="wp-switch-editor switch-tmce" onclick="switchEditors.switchto(this);">Visual</button>
<button type="button" id="cred_form_1614_1_post_content-html" class="wp-switch-editor switch-html" onclick="switchEditors.switchto(this);">Text</button>
</div>
</div>
<div id="wp-cred_form_1614_1_post_content-editor-container" class="wp-editor-container"><div class="quicktags-toolbar" id="qt_cred_form_1614_1_post_content_toolbar"><input id="qt_cred_form_1614_1_post_content_strong" class="ed_button button button-small" value="b" type="button"><input id="qt_cred_form_1614_1_post_content_em" class="ed_button button button-small" value="i" type="button"><input id="qt_cred_form_1614_1_post_content_link" class="ed_button button button-small" value="link" type="button"><input id="qt_cred_form_1614_1_post_content_block" class="ed_button button button-small" value="b-quote" type="button"><input id="qt_cred_form_1614_1_post_content_del" class="ed_button button button-small" value="del" type="button"><input id="qt_cred_form_1614_1_post_content_ins" class="ed_button button button-small" value="ins" type="button"><input id="qt_cred_form_1614_1_post_content_img" class="ed_button button button-small" value="img" type="button"><input id="qt_cred_form_1614_1_post_content_ul" class="ed_button button button-small" value="ul" type="button"><input id="qt_cred_form_1614_1_post_content_ol" class="ed_button button button-small" value="ol" type="button"><input id="qt_cred_form_1614_1_post_content_li" class="ed_button button button-small" value="li" type="button"><input id="qt_cred_form_1614_1_post_content_code" class="ed_button button button-small" value="code" type="button"><input id="qt_cred_form_1614_1_post_content_more" class="ed_button button button-small" value="more" type="button"><input id="qt_cred_form_1614_1_post_content_close" class="ed_button button button-small" title="Close all open tags" value="close tags" type="button"></div>    <textarea class="wpt-wysiwyg wp-editor-area" rows="10" autocomplete="off" cols="40" name="post_content" id="cred_form_1614_1_post_content">    </textarea></div>
</div>

</div>
</div>
<div class="cred-field cred-field-post_excerpt">
    <label class="cred-label">
Post Excerpt
</label>
    <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="textarea-post_excerpt">
<textarea id="cred_form_1614_1-textarea-1-1436915840" name="post_excerpt" rows="5" cols="1" class="wpt-form-textarea form-textarea form-control" data-wpt-type="textarea" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textarea-1-1436915840" data-wpt-name="post_excerpt"></textarea>
</div>
</div>
<div class="cred-field cred-field-_featured_image">
    <label class="cred-label">
Featured Image
</label>
    <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="credimage-_featured_image"><input style="display:none" data-action="undo" class="js-wpt-credfile-undo wpt-credfile-undo btn btn-default btn-sm" value="Restore original" type="button"><input style="display:none" data-action="delete" class="js-wpt-credfile-delete wpt-credfile-delete btn btn-default btn-sm" value="Clear" type="button"><input id="_featured_image_hidden" name="_featured_image" value="" class="js-wpv-credfile-hidden wpt-form-hidden form-hidden" data-wpt-type="file" disabled="disabled" data-wpt-id="cred_form_1614_1__featured_image_hidden" data-wpt-name="_featured_image" type="hidden">
<input id="_featured_image_file" name="_featured_image" class="js-wpt-credfile-upload-file wpt-credfile-upload-file wpt-form-file form-file js-wpt-validate" alt="" data-wpt-validate="{&quot;extension&quot;:{&quot;args&quot;:[&quot;bmp|gif|jpeg|jpg|png|svg|webp&quot;],&quot;message&quot;:&quot;You can add only images.&quot;}}" data-wpt-field-title="Featured Image" data-wpt-type="file" data-wpt-id="cred_form_1614_1__featured_image_file" data-wpt-name="_featured_image" type="file">
<span class="js-wpt-credfile-preview wpt-credfile-preview"></span></div>
</div>
<div class="cred-group cred-group-taxonomies">
    <div class="cred-taxonomy cred-taxonomy-category">
        <div class="cred-header"><h3>Categories</h3></div>
        <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="taxonomyhierarchical-category"><ul class="wpt-form-set wpt-form-set-checkboxes wpt-form-set-checkboxes-category" data-level="0"><li class="tax-uncategorized tax-category-1">
<input id="cred_form_1614_1-checkbox-1-1436915840" name="category[]" data-wpt-type="checkbox" data-wpt-id="cred_form_1614_1_cred_form_1614_1-checkbox-1-1436915840" data-wpt-name="category[]" value="1" data-parent="-1" data-value="Uncategorized" class="wpt-form-checkbox form-checkbox" type="checkbox"><label class="wpt-form-label wpt-form-checkbox-label control-label" for="cred_form_1614_1-checkbox-1-1436915840">Uncategorized</label>
</li></ul>
<div style="display:none" class="form-group wpt-hierarchical-taxonomy-add-new js-wpt-hierarchical-taxonomy-add-new-category" data-taxonomy="category">
<input id="cred_form_1614_1-textfield-2-1436915840" name="new_tax_text_category" value="" data-taxonomy="category" data-taxtype="hierarchical" class="inline wpt-new-taxonomy-title js-wpt-new-taxonomy-title wpt-form-textfield form-textfield form-control" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-2-1436915840" data-wpt-name="new_tax_text_category" type="text">
<select id="cred_form_1614_1-select-1-1436915840" data-parent-text="-- Parent --" data-taxonomy="category" class="js-taxonomy-parent wpt-taxonomy-parent wpt-form-select form-select form-control" data-wpt-type="select" name="new_tax_select_category">
<option value="-1" class="wpt-form-option form-option form-control" data-wpt-type="option" data-wpt-id="cred_form_1614_1_cred_form_1614_1-select-1-1436915840" data-wpt-name="new_tax_select_category">-- Parent --    </option>
<option value="1">Uncategorized</option></select>
<input id="cred_form_1614_1-button-2-1436915840" name="new_tax_button_category" value="Add" data-taxonomy="category" data-build_what="checkboxes" class="btn btn-default wpt-hierarchical-taxonomy-add-new js-wpt-hierarchical-taxonomy-add-new wpt-form-button form-button" type="button"></div>
</div>
        <div class="cred-taxonomy-auxilliary cred-taxonomy-auxilliary-category_add_new">
            <input id="cred_form_1614_1-button-1-1436915840" name="btn_category" value="Add New" style="" data-taxonomy="category" data-build_what="checkboxes" data-after-selector="js-wpt-hierarchical-taxonomy-add-new-category" data-open="Add New" data-close="Cancel" class="btn btn-default wpt-hierarchical-taxonomy-add-new-show-hide js-wpt-hierarchical-taxonomy-add-new-show-hide wpt-form-button form-button" type="button">
        </div>
    </div>
    <div class="cred-taxonomy cred-taxonomy-post_tag">
        <div class="cred-header"><h3>Tags</h3></div>
        <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="taxonomy-post_tag"><input id="cred_form_1614_1-hidden-1-1436915840" name="post_tag" value="" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-1-1436915840" data-wpt-name="post_tag" type="hidden"><div class="form-group">
<input autocomplete="off" id="cred_form_1614_1-textfield-3-1436915840" name="tmp_post_tag" value="" data-taxonomy="post_tag" data-taxtype="flat" class="inline wpt-new-taxonomy-title js-wpt-new-taxonomy-title wpt-form-textfield form-textfield form-control" data-wpt-type="textfield" data-wpt-id="cred_form_1614_1_cred_form_1614_1-textfield-3-1436915840" data-wpt-name="tmp_post_tag" type="text">
<input id="cred_form_1614_1-button-3-1436915840" name="new_tax_button_post_tag" value="Add" class="btn btn-default wpt-taxonomy-add-new js-wpt-taxonomy-add-new wpt-form-button form-button" data-taxonomy="post_tag" type="button"></div>
<div class="form-group"><div class="tagchecklist tagchecklist-post_tag">    </div>
</div>
</div>
        <div class="cred-taxonomy-auxilliary cred-taxonomy-auxilliary-post_tag_popular">
            <input id="cred_form_1614_1-button-4-1436915840" name="sh_post_tag" value="Show Popular" class="btn btn-default popular wpt-taxonomy-popular-show-hide js-wpt-taxonomy-popular-show-hide wpt-form-button form-button" data-taxonomy="post_tag" data-show-popular-text="Show Popular" data-hide-popular-text="Hide Popular" data-after-selector="js-show-popular-after" style="display:none;" type="button">
        </div>
    </div>
    
</div>
<input id="cred_form_1614_1-submit-1-1436915840" name="form_submit_1" value="Submit" class=" btn btn-primary wpt-form-submit form-submit" type="submit">
<input id="cred_form_1614_1-hidden-2-1436915840" name="_cred_cred_wpnonce" value="b49e76a9ab" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-2-1436915840" data-wpt-name="_cred_cred_wpnonce" type="hidden"><input id="cred_form_1614_1-hidden-3-1436915840" name="_cred_cred_prefix_post_id" value="1620" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-3-1436915840" data-wpt-name="_cred_cred_prefix_post_id" type="hidden"><input id="cred_form_1614_1-hidden-4-1436915840" name="_cred_cred_prefix_cred_container_id" value="1615" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-4-1436915840" data-wpt-name="_cred_cred_prefix_cred_container_id" type="hidden"><input id="cred_form_1614_1-hidden-5-1436915840" name="_cred_cred_prefix_form_id" value="1614" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-5-1436915840" data-wpt-name="_cred_cred_prefix_form_id" type="hidden"><input id="cred_form_1614_1-hidden-6-1436915840" name="_cred_cred_prefix_form_count" value="1" class="wpt-form-hidden form-hidden" data-wpt-id="cred_form_1614_1_cred_form_1614_1-hidden-6-1436915840" data-wpt-name="_cred_cred_prefix_form_count" type="hidden"></form>

更新::

我实现了在提交后显示(单个)新帖子:

jQuery(document).ready(function() { 
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
    if (data.length > 0) {
        jQuery('.page').empty();
      jQuery('.page').html(data);
    }
});
});

我不确定你想用响应更新什么元素,因为你的问题中没有包含任何HTML。下面的代码将把来自服务器端的数据附加到您选择的元素中。

$(function(){
    jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
        if (data.length > 0) {
            $('.someElement').append(data);
        }
    });
});