我如何通過按鈕調用阿賈克斯功能

Question

我想發佈ajax到wordpress和即時通訊打磚牆我已經得到了這一點，多虧了你wonderfull傢伙，但我需要沒有如何我的形式稱爲目前它仍然說沒有找到文件，我用虛擬文本替換了真正的文件名，以保證文章的安全。

這是我的形式，我需要的是沒有什麼取代我的操作方法，並提交按鈕，才能夠調用這個函數中的functions.php

我需要沒有如何從電話本按鈕withiin我在它的onclick形式我beleive

<form class="form-horizontal" class="contact" id="redemmpointsForm" > 
      <div class="form-group"> 
      <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3> 
       <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" /> 
        <input type="number" valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />     
        <label class="control-label col-md-4" for="Comments">Comments?</label> 
       <input type="text" name="comments" /> 

     </div> 
     <div class="form-group"> 
       <div class="col-md-6"> 

         <input type="submit" class="btn btn-success" id="submit">submit</button> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 

       </div> 
      </div> 

 </form> 

add_action('wp_enqueue_scripts', 'load_these_scripts'); 
function load_these_scripts() { 
     wp_register_script('your_script', 'URI_OF_JS_THAT_MAKES_THE_AJAX_CALLS/scripts.js', false, false, true); 
     wp_localize_script('my_ajax_script', 'myAjax', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

在scripts.js中

然後，你需要做的AJAX調用是這樣的： 使用這個而不是「數據：」

$("#send_btn").click(function() { 
    var formdata = $('form.contact').serialize(); 
    var allData = { 
     action: 'php_function_name', 
     data: formdata 
    } 

     jQuery.ajax({ 
     type : "post", 
     dataType : "json", 
     url : myAjax.ajaxurl, 
     data : allData, 
     success: function(response) { 
      if(response.type == "success") { 
       // Do something 
      } 
      else { 
       // Do something else 
      } 
     } 
     }); 
}); 

的action: "php_function_name"實際上告訴WP調用哪個函數，但你還需要註冊那麼好。像這樣做，回到你的functions.php（或插件文件）：

add_action("wp_ajax_php_function_name", "php_function_name"); 
add_action("wp_ajax_nopriv_php_function_name", "php_function_name"); 
function php_function_name() { 

    // Some stuff here 
    global $wpdb; 
    $result = $wpdb->get_results(/* SQL code goes here */); 
    // Do something with $result 
} 

確保您有兩個「wp_ajax」 &「wp_ajax_norpiv」否則只會爲登錄用戶註冊工作的功能。

乾杯

編輯我彪說我的形式是一個模式內，也許它沒有找到提交按鈕？

<div id="thanks" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title">Redeem Points</h4> 
     </div> 
     <div class="modal-body"> 


<form class="form-horizontal" class="contact" id="redemmpointsForm" > 
      <div class="form-group"> 
      <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3> 
       <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" /> 
        <input type="number" valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />     
        <label class="control-label col-md-4" for="Comments">Comments?</label> 
       <input type="text" name="comments" /> 

     </div> 
     <div class="form-group"> 
       <div class="col-md-6"> 

         <input type="button" class="btn btn-success" id="send_btn">Submit</button> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 

       </div> 
      </div> 
</form> 



     </div><!-- End of Modal body --> 
     </div><!-- End of Modal content --> 
     </div><!-- End of Modal dialog --> 
    </div><!-- End of Modal --> 

編輯解釋我有多遠GOT

好了所以，現在我已經得到了第一行這麼遠我的消息框被解僱。因此，它收集我的表單數據，但其ignorning數列中的某些原因，我需要這個職位要調用的函數在WordPress的functions.php

wp_localize_script('inkthemes', 'MyAjax', array('ajaxurl' => admin_url('admin-ajax.php'))); 
add_action("wp_ajax_redeempoints", "redeempoints"); 
add_action("wp_ajax_nopriv_redeempoints", "redeempoints"); 
function redeempoints() { 

global $wpdb; 

wp_mail('davidbuckleyni@gmail.com', 'The subject', 'The message'); 
} 

jQuery腳本

jQuery(document).ready(function(){ 
jQuery("#send_btn").click(function(){ 

var datastring = $("#redemmpointsForm").serialize(); 

var allData = { 
     action: 'redeempoints', 
     data: datastring 
    } 
     alert(datastring); // first message box fires 

     jQuery.ajax({ 
     type : "post", 
     dataType : "json", 
     url : myAjax.ajaxurl, 
     data : allData, 
     success: function(response) { 
      if(response.type == "success") { 
       alert('Call Ajax !!'); // this one does not 
      } 
      else { 
       // Do something else 
      } 
     } 
     }); 
}); 
}); //Modal event Ends 

Answer 1

更改輸入類型按鈕並添加id作爲js選擇send_btn。

$("#send_btn").click(function() { 
 
    alert('Call Ajax !!'); // for Your info 
 
    
 
    var points = $('#points').val(); 
 
    var comments = $('#comments').val(); 
 
    
 
    alert(points+' '+comments); // for Your info 
 
    
 
    var allData = { 
 
     action: 'php_function_name', 
 
     points: points, 
 
     points:points 
 
    } 
 
    
 

 
     jQuery.ajax({ 
 
     type : "post", 
 
     dataType : "json", 
 
     url : myAjax.ajaxurl, 
 
     data : allData, 
 
     success: function(response) { 
 
      if(response.type == "success") { 
 
       // Do something 
 
      } 
 
      else { 
 
       // Do something else 
 
      } 
 
     } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-horizontal" class="contact" id="redemmpointsForm" > 
 
      <div class="form-group"> 
 
      <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3> 
 
       <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" /> 
 
        <input type="number" id="points" valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />     
 
        <label class="control-label col-md-4" for="Comments">Comments?</label> 
 
       <input type="text" name="comments" id="comments" /> 
 

 
     </div> 
 
     <div class="form-group"> 
 
       <div class="col-md-6"> 
 

 
         <input type="button" class="btn btn-success" id="send_btn" value="submit"></button> 
 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
 

 
       </div> 
 
      </div> 
 
</form>