placing PHP Variables inside javascript file

问题:

As per title.

I have a piece of jQuery that looks like the following

$("<div class='creditCardDetails' id='usercurrentccbox'>     <div class='creditCard'>     <div class='cardChoice'>     <span>Choose Card Type</span>     <input name='cctype' type='radio' value='V' class='lft-field' id='visa' />     <label for='visa'></label>     <input name='cctype' type='radio' value='M' class='lft-field' id='mastercard' />     <label for='mastercard'></label><input name='cctype' type='radio' value='A' class='lft-field' id='amex' />     <label for='amex'></label>     </div>     <!--cardChoice-->     <div class='cardNumber'>     <input name='ccn' id='ccn' type='text' class='long-field' value='<?php echo MaskCreditCard($loggedInfo[ccn]);?>' maxlength='19' readonly />     </div>     <div class='cardCVV'>     <input name='cvv' id='cvv' type='text' maxlength='5' class='small-field' />     </div>     <div class='creditCardName'>     <input name='ccname' id='ccname' type='text' class='long-field' value='<?php echo $loggedInfo[ccname];?>' readonly/>     </div     <div class='cardDate'>     <input name='exp1' id='exp1' type='text' maxlength='2' class='small-field' value='<?php echo $loggedInfo[ccm];?>' readonly /><input name='exp2' id='exp2' type='text' maxlength='4' class='small-field' value='<?php echo $loggedInfo[ccy];?>' readonly />     </div>     </div><!--creditCard-->").insertAfter("#paymentCardChoice"); 

But as you'll see it has PHP Variables, if I have this embedded into my PHP file this works but I want to keep the PHP file as short as possible and placed this code inside a .js file and of course my variables only display the text of the PHP not the variable its self.

The variables I am trying to call are defined already in a config.php file.

Would I need to use something like this? if so I'm stuck with how I would call the variables in the code above.

$.post('phpfile.php', qString, function (data) {  }, "json");  

回答1:

PHP code will not execute in a .js file. A very simple workaround is to put your JavaScript+PHP code in a .php file; and set the content type header, for example:

<?php     #     # script.js.php     #     header("Content-type: text/javascript"); ?> $("<div><?php echo $foo; ?></div>"); 

You will find the json_encode function very handy for converting just about any PHP variable (string, number, arrays etc) into valid JavaScript. This function takes care of escaping characters such as ", \, \n etc which could break your JavaScript code. Following example demonstrates how you can pass arbitrary PHP variables to your JavaScript code:

<?php     #     # script.js.php     #     header("Content-type: text/javascript"); ?> var config = <?php echo json_encode(array(    "foo" => "foo",    "bar" => "bar",    "baz" => array(        "baz1",        "baz2"    ) )); ?>; 

You can include "PHP-powered JavaScript" file in your PHP page using the <script src> tag:

<script type="text/javascript" src="script.js.php"></script> 

回答2:

If you place it in a separate .js file, it will not work since Javascript is client side and PHP is server side.

Your PHP variable only works now since it is declaired earlier in the page before you insert your javascript, so it is rendered when the page loads.

回答3:

you can have a PHP file which will include your config.php file

include("config.php"); 

and then you can have your jquery code within script tags

<script>    // you jquery code with php config variables </script> 

回答4:

.js

var qString = 'selectedID=' +selectedID; $.post('/assets/inc/get-logged-info-card.php', qString, function (results) { $("<div class='creditCardDetails' id='usercurrentccbox'>     <div class='creditCard'>     <div class='cardChoice'>     <span>Choose Card Type</span>     <input name='cctype' type='radio' value='V' class='lft-field' id='visa' />     <label for='visa'></label>     <input name='cctype' type='radio' value='M' class='lft-field' id='mastercard' />     <label for='mastercard'></label><input name='cctype' type='radio' value='A' class='lft-field' id='amex' />     <label for='amex'></label>     </div>     <!--cardChoice-->     <div class='cardNumber'>     <input name='ccn' id='ccn' type='text' class='long-field' value='"+results[0].maskccn+"' maxlength='19' readonly />     </div>     <div class='cardCVV'>     <input name='cvv' id='cvv' type='text' maxlength='5' class='small-field' />     </div>     <div class='creditCardName'>     <input name='ccname' id='ccname' type='text' class='long-field' value='"+results[0].ccname+"' readonly/>     </div     <div class='cardDate'>     <input name='exp1' id='exp1' type='text' maxlength='2' class='small-field' value='"+results[0].ccm+"' readonly /><input name='exp2' id='exp2' type='text' maxlength='4' class='small-field' value='"+results[0].ccy+"' readonly />     </div>     </div><!--creditCard-->").insertAfter("#paymentCardChoice"); }, "json"); 

.php

<?php $selectedID     =   $_POST['selectedID'];  $q = "SELECT * FROM tbl_user WHERE user_id = '$selectedID'"; $sql = mysql_query($q);  $results = array(); while($row = mysql_fetch_array($sql)) {    $results[] = array(       'cct'     => $row['user_cct'],       'ccn'     => $row['user_ccn'],       'maskccn'     => MaskCreditCard($row['user_ccn']),       'ccname'      => $row['user_ccname'],       'ccm'     => $row['user_date_m'],       'ccy'     => $row['user_date_y']    ); } echo json_encode($results); ?> 

文章来源: placing PHP Variables inside javascript file