Используя Ajax, я вызываю php-файл, содержащий javascript, но в этом случае javaScript не работает.
Файл main.html приведен здесь. Он просто использует Ajax для вызова php-файла с именем test1.php для обновления всей страницы на клиенте.
<!DOCTYPE html> <html> <body> <!-- run php file to fill the page --> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.body.innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","test1.php",true); xmlhttp.send(); </script> </body> </html> И файл test1.php очень прост:
<p id="demo">Hi there</p> <script> document.write("Yes! Hi there"); alert('Welcome!'); </script>
Теперь, просто для проверки того, что test1.php в порядке, я ввел строку URL-адреса браузера:
локальный / test1.php
и все работает нормально, отображается текст html и js и окно предупреждения со словом Welcome! отображается.
Но если я позвоню на главную страницу
локальный / main.html
Затем отображается только текст html «Привет, там». JS игнорируется.
Кто-нибудь знает, почему это? благодаря
Вот 3 основных примера того, что вы можете сделать с ajax и как вы должны это делать:
Основной html
JS
function ajax(a,b,c){ // Url, Callback, just a placeholder c=new XMLHttpRequest; c.open('GET',a); c.onload=b; c.send() } function changeHTML(){ document.getElementById('mytext1').innerHTML=this.response; } function executeJS(){ (new Function(this.response))() } var array=[]; function loadJSON(){ array=JSON.parse(this.response); updateFields(); } function updateFields(){ for(var a=0,b;b=array[a];++a){ document.getElementById(b.id).textContent=b.data; } } window.onload=function(){ ajax('getHTML.php',changeHTML); ajax('getJS.php',executeJS); ajax('getJSON.php',loadJSON); // even if this works you should execute ajax sequentially }
HTML
<div id="mytext1"></div> <div id="mytext2"></div>
getHTML.php
<?php echo "<div>i'm html</div>"; ?>
getJS.php
<?php echo "var a='hello';alert(a);"; ?>
getJSON.php
<?php $arr=array(array('id'=>'mytext2','data'=>'data')); echo json_encode($arr);//json_decode ?>
если вы хотите выполнить функцию javascript, используйте функцию executeJS и передайте действительную строку javascript.
Нет необходимости в EVAL!
СОВЕТ: используя json, вы можете передать функцию как данные, но поскольку синтаксический анализ не похож на функцию строки в начале, трюк заключается в том, чтобы преобразовать javascript в base64 и вернуться в обычную строку с javascript с atob(base64) и иметь что-то как это:
function updateFields(){ for(var a=0,b;b=array[a];++a){ if(b.func){ (new Function(atob(b.func)))() }else{ document.getElementById(b.id).textContent=b.data; } } }
PHP
<?php $arr=array( array('id'=>'mytext2','data'=>'data'), array('func'=>base64_encode("alert('jsonfunc')")) ); echo json_encode($arr);//json_decode ?>
возможно, есть некоторые небольшие ошибки … я написал это сейчас. и не может проверить ajax atm.
Если у вас есть какие-либо вопросы просто спросить !!
Я хочу дать вам один совет, который поможет вам использовать javascript, который вы можете использовать jquery ajax, это будет легко и актуально для ajax.
Вы можете использовать функцию $ .ajax. Вы можете легко использовать json с этой функцией
Когда вы совершаете вызов AJAX, вы связываетесь с URL-адресом сервера. Если ваш URL-адрес, как в этом случае, php-страница, он будет выполняться на сервере и возвратится на ваш вызов AJAX HTML, который он создает … теперь вы можете играть с этим HTML-кодом и управлять им или публиковать на своей текущей странице DOM.
-AJAX – это серверный вызов, выполняющий код сервера.
-Автоматический тег, внедренный на php-страницу, является HTML, который будет выполнять код, который он содержит на клиенте, когда он разобран и выполняется браузером.
Итак … ваш код не выполняется, потому что его никогда не вызывают … ответ на ваш вызов AJAX будет точно
<p id="demo">Hi there</p> <script> document.write("Yes! Hi there"); alert('Welcome!'); </script>
Страница php выполняет и возвращает это на вашу текущую страницу как text / html.
Если вы хотите выполнить код клиента из своего javascript, вы должны иметь его в том же файле .js или в другом, но если вы включите его на страницу сервера, вам нужно будет перенаправить ваш браузер на эту страницу, если вы позвоните он с AJAX код не будет выполняться, поскольку клиентский браузер не будет его анализировать.
Красимир Цонев имеет отличное решение, которое преодолевает все проблемы. Его метод не требует использования eval, поэтому никаких проблем с производительностью и безопасностью не существует. Он позволяет вам установить строку innerHTML, содержащую html с js, и немедленно перевести его на элемент DOM, а также выполнить js-части, существующие вдоль кода. короткий, простой и работает точно так, как вы хотите. Таким образом, в этом случае ответ от ajax является строкой src, которая затем переводится на объект DOM согласно Красимиру Цоневу, а затем вы работаете с исполняемыми js частями.
var el = str2DomElement(xmlhttp.responseText); document.body.innerHTML = el.innerHTML;
Наслаждайтесь его решением:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
Важные заметки: