Lade Kategorien mit Ajax

Ich habe keine Verbindung oder Demo zu zeigen, weil ich lokal arbeite

Ich habe Nachrichtenbeiträge mit verschiedenen Kategorien.

Ich möchte die Kategorien als Schaltflächen anzeigen.

Wenn Sie auf eine Kategorie klicken, möchte ich diese Beiträge mit Ajax laden, damit ich die Seite nicht neu laden kann.

Die Kategorie-Schaltflächen


Die jQuery

  $('.js-category-button').on('click', function(e){ e.preventDefault(); var catID = $atj(this).data('slug'); var ajaxurl = 'http://my-site.co.uk /wp-admin/admin-ajax.php'; $atj.ajax({ type: 'POST', url: ajaxurl, dataType: 'jsonp', crossDomain : true, data: {"action": "load-filter", cat: catID }, success: function(response) { $atj(".the-news").html(response); return false; } }); }) 

Die PHP-Abfrage in functions.php

  add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' ); add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' ); function prefix_load_cat_posts () { $cat_id = $_POST[ 'cat' ]; $args = array ( 'cat' => $cat_id, 'posts_per_page' => 3, 'order' => 'DESC' ); $posts = get_posts( $args ); ob_start (); foreach ( $posts as $post ) { setup_postdata( $post ); ?> <div id="post-ID; ?> "> 

<a href="https://wordpress.stackexchange.com/questions/190655/load-categories-with-ajax/">

<?php } wp_reset_postdata(); $response = ob_get_contents(); ob_end_clean(); echo $response; }

Die Kategorien erscheinen, wenn ich auf sie klicke, gibt mir die Konsole 502 Proxy Error (Der Host wurde nicht gefunden.)

Kann jemand sehen, was ich falsch mache oder wie ich das beheben kann?

Aktualisieren

Ich habe den Code teilweise jetzt aber ich habe immer noch Probleme

Meine js befindet sich derzeit in einer separaten js-Datei

Der einzige Weg, wie ich es funktionierte, war die Verwendung der Site-URL für Ajaxurl

  $atj('.js-category-button').on('click', function(e){ e.preventDefault(); var catID = $atj(this).data('slug'); var ajaxurl = 'http://mysite.co.uk/wp-admin/admin-ajax.php'; $atj.ajax({ type: 'POST', url: ajaxurl, crossDomain : true, //dataType: 'jsonp', //contentType: "text/html", dataType: 'html', data: {"action": "load-filter", cat: catID }, success: function(response) { $atj(".the-news").append(response); return false; } }); }) 

Mein PHP-Skript ist in functions.php

Ich denke, es sollte nur ein Tag in functions.php geben, also wollte ich nicht aus dem PHP in der function ausbrechen, um das HTML-Markup zu erstellen. Das ist der Grund, warum ich versuche, alles zur $ response-Variable hinzuzufügen, die dann wieder ausgegeben wird.

  add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' ); add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' ); function prefix_load_cat_posts () { global $post; $cat_id = $_POST[ 'cat' ]; $args = array ( 'cat' => $cat_id, 'posts_per_page' => 3, 'order' => 'ASC' ); $cat_query = new WP_Query($args); if($cat_query->have_posts()) : while($cat_query->have_posts()) : $cat_query->the_post(); $response = '
'; $response .= '

'; $response .= ''. the_title() .''; $response .= '

'; $response .= '

'. the_content().'

'; $response .= '
'; echo $response; endwhile; endif; wp_reset_postdata(); die(1); }

Diese Art von Arbeiten. Ich bekomme HTML-Ausgabe mit dem Titel des Beitrags, aber es ist außerhalb des HTML-und ich kann den Inhalt nicht ausgeben.

  add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' ); add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' ); function prefix_load_cat_posts () { global $post; $cat_id = $_POST[ 'cat' ]; $args = array ( 'cat' => $cat_id, 'posts_per_page' => 3, 'order' => 'ASC' ); $cat_query = new WP_Query($args); if($cat_query->have_posts()) : while($cat_query->have_posts()) : $cat_query->the_post(); $response = '
'; $response .= '

'; $response .= ''. the_title() .''; $response .= '

'; $response .= '

'. the_content().'

'; $response .= '
'; echo $response; endwhile; endif; wp_reset_postdata(); die(1); }

Jede Hilfe, die dies zur Arbeit bringt, würde sehr geschätzt werden.

Solutions Collecting From Web of "Lade Kategorien mit Ajax"

Der Fehler sagt alles, Sie senden die Anfrage an einen ungültigen Host.

Ändere das:

  var ajaxurl = 'http://my-site.co.uk < ?php bloginfo("wpurl");?>/wp-admin/admin-ajax.php'; 

Zu:

  var ajaxurl = "< ?php echo esc_js( admin_url( 'admin-ajax.php' ) ) ?>"; 

Hinweis : Aus deinem Code und deiner Beschreibung gehe ich davon aus, dass du den jQuery-Code in PHP generierst und er sich nicht in einer js-Datei befindet.

Zusätzlich müssen Sie das Programm beenden, nachdem die Ajax-Antwort gesendet wurde (dies geschieht nicht automatisch und die Anfrage könnte für immer offen sein, siehe Dokumentation ):

 echo $response; // Terminate exit; 

Und mehr falsche Dinge, die ich in Ihrem Code sehe: Sie sagen zu jQuery, mit JSONP-Daten zu arbeiten, aber Ihre Ajax-Antwort ist eine HTML-Zeichenfolge. Sie sollten diese Zeile entfernen oder in den richtigen Datentyp ändern:

 dataType: 'jsonp', 

Nach der Ausgabe der Frage haben Sie ein neues Problem eingeführt. Sie versuchen, the_content the_content() dem Wert von $response the_content() aber the_content() den Post-Inhalt aus, es gibt keinen Wert zurück. Wenn Sie den Wert des Post-Inhalts abrufen möchten, sollten Sie stattdessen get_the_content () verwenden, und um das gleiche Ergebnis wie the_content , sollten Sie die the_content Filter anwenden. Ändere das:

 $response .= '

'. the_content().'

';

Zu:

 // 

are not need because the the_content filters include wpautop() $response .= apply_filters( 'the_content', get_the_content() );