web-dev-qa-db-fra.com

La page se recharge avant AJAX Demande de finitions

Je travaille sur un plug-in WP et je dois pouvoir appeler une URL (en particulier une fonction AJAX) à l'aide d'un clic de bouton, mais la page est actualisée après avoir cliqué dessus. Je pense que cela empêche la requête AJAX de terminer.

Lorsque le clic du bouton est enregistré, JS est censé saisir la valeur d'une entrée, la combiner pour former une URL, puis remplacer une source iFrame par cette URL (qui, je pense, l'appelle), mais cela est contre-commandé par l'actualisation de la page.

Le code est ci-dessous:

$intro = get_post_meta($post -> ID, $key = 'podcast_file', true);
?>
        <div class="downloadHolder">
            <h3>Download <?php echo $post->post_title ?> (<?php echo basename($intro, ".ftb") ?>)</h3>
            <a href="<?php echo $intro;?>" download="<?php echo basename($intro) ?>" class="demoBtn">Download <?php echo basename($intro, ".ftb") ?> for PC</a>
            <!--<a href="#" class="demoBtn">Demo</a>--><br>
            <input type="text" name="emailValue" id="emailValue" placeholder="Email Address" class="emailInput" style="text-align: center;">
            <button id="UniqueLevelEmailButton" class="downloadBtn" style="margin-top: 0px; width: 100%;">Email for Mobile</button>
            <span>(We do NOT collect email addresses.)</span>
            <span id="checkMe"></span>      
            <script>
                jQuery(document).ready(function($){
                    $("#UniqueLevelEmailButton").click(function(e){
                            email = document.getElementById('emailValue').value;
                            downloadurl = '<?php admin_url('admin-ajax.php');?>?action=download_email_send&postId=<?php echo $post->ID; ?>&emailValue='+email;
                            document.getElementById('emailsendframe').src = downloadurl;
                        return false;
                    });
                    return false;
                });
            </script>
<!-- iframe for submitting to -->
<iframe name="emailsendframe" id="emailsendframe" src="javascript:void(0);" style="display:none;"></iframe>
        </div>
    <?php
return ob_get_clean();
}
add_shortcode('level', 'file_download');


/*      AJAX        */


add_action('wp_ajax_download_email_send','download_email_send');
add_action('wp_ajax_nopriv_download_email_send','download_email_send');

// note $_REQUEST will work with $_POST or $_GET methods
function download_email_send() {

    $to = $_REQUEST['emailValue'];

    // preferably add some email address format validation here
    // $validate = some_email_validate_function($to);
    // if ($validated) {$message = 'Please check your email for typos.';}
    // else {
        $post_id = $_REQUEST['postID'];

    $page = get_post($post_id);
    $postName = $page->post_title;

        // ! you would need to redefine $intro here !
    $intro = get_post_meta($post_id, $key = 'podcast_file', true);
    $path = str_replace("http://example.com/wp-content","",$intro);
        $subject = 'Download for '.$postName;

        $msg = 'Your download for '.$postName.' ('.basename($intro).') is attached to this email.';

    //Why am I unable to pass HTML in the message?

        $headers = 'From: Example <[email protected]>' . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
        $mail_attachment = array(WP_CONTENT_DIR . $path);

        $send = wp_mail($to, $subject, $msg, $headers, $mail_attachment);

        if ($send) {$message = 'Success! Your download has been sent to your email address.';}
        else {$message = 'Error: Mail sending failed. Please contact the website administrator using the contact page.';}
    // }

    // alert the user to the result
    echo "<script>alert('".$message."');</script>";
    exit;
}
phpplugin-developmentajaxjavascriptiframe
2
K.Briggs

S'il vous plaît ne mettez pas ce code en production

D'ACCORD. Il y a donc beaucoup de problèmes avec le code qui doivent être corrigés avant que nous puissions même commencer à répondre à votre question.

  1. Premièrement, nous utilisons $_REQUEST sans bonne raison - $_REQUEST nous donne accès à toutes les informations envoyées dans la demande, ce qui signifie que $_POST['foo']$_REQUEST['foo'] === $_GET['foo'] et aussi $_COOKIE['foo']! Cela signifie que nous pouvons demander des identifiants à votre application simplement en installant un cookie sur place.

  2. Deuxièmement, nous prenons $post_id et le faisons avec:

    $ post_id = $ _REQUEST ['postID']; ... $ page = get_post ($ post_id);

Ce qui signifie que, une fois que nous avons scruté le code de [get_post](https://developer.wordpress.org/reference/functions/get_post/) et constaté qu’il ne vérifie aucun droit d’accès, cela signifie que vous autorisez maintenant l’utilisateur (que vous ne connaissez pas) à n’avoir aucun "message" que vous avez sur votre site Internet. Comme WordPress stocke les objets all post-like dans la table wp_posts, cela signifie que si vous utilisez des types de post WordPress pour n’importe quel type d’information protégée, l’utilisateur pourra alors accéder à cette information (en théorie) simplement en: en le demandant.

  1. Troisièmement, nous passons une variable non filtrée dans une fonction a la$intro = get_post_meta($post_id, $key = 'podcast_file', true); - heureusement, WordPress filtre cette entrée pour nous.

  2. Quatrièmement, nous envoyons ensuite la valeur de retour de this, unchecked pour créer une autre variable $path = str_replace("http://com.areonline.co.uk/wp-content","",$intro);

  3. Cinquièmement, nous utilisons ensuite la variable this _ ($path) et l'envoyons en pièce jointe à l'expéditeur !!!

Sinon, essayez d'envoyer votre demande en utilisant jQuery.post et envisagez également de créer des variables localisées en utilisant Localize Script et (pour répondre à la question) utilisez également event.preventDefault() pour tout ce que vous ne faites pas. Je ne veux pas arriver.

Dans ce cas:

$("#UniqueLevelEmailButton").click(function(e){
    e.preventDefault();
    // blah
}
3
FaCE

Je ne peux pas commenter sur la validité de l'appel AJAX; c'est un style différent de celui que j'ai utilisé - mais dans le code click(function(e) {, vous pouvez essayer de capturer l'action de page par défaut pour l'empêcher de déclencher l'actualisation de la page:

 $("#myelement).click(function(e){
     e.preventDefault();
0
C C