Question

我有一个问题，我想在单击按钮时执行ReadMore / ReadLess javascript。单击的函数是ajax PostData（）函数。

文章或段落位于名为gethint.php

的单独文件中

我没有在这种情况下使用javascript。但是，如果我将文章或段落移动到display.php，那么它就会成功运行。

Display.php的

echo '<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">      </script></head>';
<input type="url" id="Url"  name="Url" placeholder="http://example.com " class="form-  control"/>
<span class="input-group-btn">
<button type="button" id="tx" class="btn green" onclick="PostData()"></button>
</span>

<div id="result"> </div>  

<script>
function PostData() {
// 1. Create XHR instance - Start
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
    throw new Error("Ajax is not supported by this browser");
}

        var target = document.getElementById('result');
    if (xhr.readyState === 4) {
        if (xhr.status === 200 && xhr.status < 300) {
            document.getElementById('result').innerHTML = xhr.responseText;

        }
    }
};
// 2. Define what to do when XHR feed you the response from the server - Start

var url = document.getElementById("Url").value;

// 3. Specify your action, location and Send to the server - Start 
xhr.open('POST', 'gethint.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("Url=" + url);
// 3. Specify your action, location and Send to the server - End

}
</script>

//script for Read More /Read Less
<script>// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
$(".read-more-content").addClass("hide");
$(".read-more-show, .read-more-hide").removeClass("hide");

// Set up the toggle effect:
$(".read-more-show").on("click", function(e) {
$(this).next(".read-more-content").removeClass("hide");
$(this).addClass("hide");
e.preventDefault();
});

$(".read-more-hide").on("click", function(e) {
$(this).parent(".read-more-content").addClass("hide");
var moreid=$(this).attr("more-id");
$(".read-more-show#"+moreid).removeClass("hide");
e.preventDefault();
}); </script>

gethint.php

<?php

if(isset($_POST['Url'])) { 

$query = $_POST['Url']; 
echo "<p> URL is " . $query . "</p>" 
echo '<article>
<p>Egestas quos curabitur cum. <a class="read-more-show hide" href="#" id="1">Read  More</a> <span class="read-more-content">Suspendisse! Rutrum cupidatat! <a class="read-more- hide hide" href="#" more-id="1">Read Less</a></span></p>

<p>Egestas mollitia quos natus. <a class="read-more-show hide" href="#" id="2">Read More</a> <span class="read-more-content">Suspendisse! Rutrum cupidatat! <a class="read-more- hide hide" href="#" more-id="2">Read Less</a></span></p>

<p>Egestas mollitia curabitur cum. <a class="read-more-show hide" href="#" id="3">Read More</a> <span class="read-more-content">Suspendisse! Rutrum conubia cupidatat! <a class="read-more-hide hide" href="#" more-id="3">Read Less</a></span></p>

</article> ' ;

}

Answer 1

在AJAX调用完成后，您需要在最后一个脚本标记中执行代码。将其移动到一个函数并调用该函数。鉴于您已经使用了jQuery，我建议使用jQuery.post，并且在回调中，您可以执行上一个脚本标记中的代码。

在单独的ajax文件上运行javascript

1 个答案: