簡體   English   中英

如何在jQuery代碼中使用腳本標簽包含js文件?

[英]how to include js file using script tag in jquery codes?

當使用$.ajax從數據庫中獲取數據並執行某些操作而不刷新頁面時,我想在jQuery腳本中包含js文件

例如:

$.ajax({
  type: 'POST',
  url: "content.php",
  data: {vals: "value"},
  success : function(response) { 
    $(body).append(response)
    showScrollStyle();
  }
}); 

function showScrollStyle() {
 // here should include 3 js file for change scroll style
}

響應將顯示一個500px height和寬度為500px height的div,並帶有overflow:auto; 樣式以及div的文字是否大於500px; 垂直滾動將自動顯示,我有3個js文件,應該在其中添加以更改滾動樣式和類型。

我嘗試了$.getScrpit()函數,但它將刷新頁面並僅顯示白頁。

我怎樣才能做到這一點? 謝謝

編輯1:

我創建了一些我認為可以解釋我想要的代碼

HTML代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
$(document).ready(function(e) {
    textScroll()
   function textScroll() {

        $.ajax({
          type: 'POST',
          url: "content.php",
          data: {val: "text_div"},
          success : function(response) { 
            $("body").append(response);
            showScrollStyle()
          }
        }); 
    }

    });

    function showScrollStyle() {
        // jquery.mCustomScrollbar.concat.min.js should import in here for work with new elemnts
    }
</script>
<link rel="stylesheet" href="style/scroll_style.css">

<style>
body {

    background-color:#369;
}
</style>

</head>

<body>


</body>
</html>

PHP代碼

<?php 

    include 'Connections.php';  // connect to database

    $val =  $_POST['val'];
    $query = "SELECT contains FROM textarea WHERE name='".$val."' LIMIT 1";
            //  echo $query;
    if ($result = $mysqli->query($query)) {
        while ($row = $result->fetch_assoc()) {
            echo $row['contains'];  
        }
    }   
    else
    {
        echo $mysqli->error;
    }

?>

文本表中存儲的內容

<div style=" display:inline-block; margin:auto; width:800px; height:400px; overflow:auto;" id="rulesScroll" class="font c_blue_dark mCustomScrollbar interfo_section">
  <span style=" display:inline-block; margin:30px; font-size:44px;" id="newsContain">
               text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </span> 
</div>

注意:如果需要jquery.mCustomScrollbar.concat.min.js,則可以在此處http://manos.malihu.gr/jquery-custom-content-scroller/下載滾動條插件。

我使用了$ .getScript函數,它對我來說很好用。 您是否以正確的方式使用了功能? 請檢查以下代碼。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body id="body">
 <button onclick="load()" id="load">&raquo; Load</button>
<button id="go">&raquo; Run</button>
<div class="block"></div>

<script>
function load()
{
    $.ajax({
      type: 'GET',
      url: "/search",
      data: {vals: "value"},
      success : function(response) {
      $("#body").append(response);
        showScrollStyle();
      }
    }); 
}

function showScrollStyle() {
 // here should include 3 js file for change scroll style
 var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() 
{
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});
}

</script>

</body>
</html>

此代碼不刷新頁面。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM