jQuery ajax method to dynamically execute scripts_jquery

The example in this article describes the jQuery ajax method of dynamically executing scripts. Share it with everyone for your reference. The specific analysis is as follows:

Sometimes it’s not necessary to get all the JavaScript you need when the page first loads. The specific script that needs to be obtained depends on the user's operation. Although it is possible to dynamically include the <script> tag when needed, a more elegant way to inject the required code is to load the .js file directly through jQueiy. </script>

Injecting script into a page is as easy as loading an HTML fragment. But in this case, you need to use the global function $.getScript(). This global function is similar to its sibling function and accepts a URL parameter to find the script file. See the following code:

Copy code The code is as follows:

$(document).ready(function() {
$('#letter-c a').click(function(event) { event.preventDefault();
$.getScript('c.js');
});
});

In the previous example, the next thing to do should be to process the resulting data in order to make efficient use of the loaded file. However, with a script file, this process is automated; in other words, the script is executed automatically.
Scripts obtained in this way will be executed in the global environment of the current page. This means that the script has access to functions and variables defined in the global environment, including jQuery itself. Therefore, we can imitate the JSON example to prepare script code to insert HTML into the page when the script is executed. Now, save the following script code into c.js:

Copy code The code is as follows:

var entries = [
{
"term": "CALAMITY",
"part": "n.",


"definition": "A more than commonly plain and...
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
}
//Omitted content
];
var html ='';
$.each(entries, function() {
html = '

';
html = '

' this.term '

';
html = '

' this.part '

';
html = '

' this.definition '

';
html = '

';
});
$('#dictionary').html(html);

Finally, click on the c link and you should see the results we expected.

I hope this article will be helpful to everyone’s jQuery programming.