2016-08-16 9 views
1

私の最初のウェブサイトをコーディングしていますが、今では私のサイトの内容についての長い説明が含まれているテキストファイルの内容でpコンテンツを変更しようとしています。私はそれをローカルで、おそらく間違ったファイル位置のために実行していたので、httprequest()、FileReader()、jquery getのような多くの方法を試しましたが、実際には管理していませんでした。 jqueryを試してみましたが、私は "Webサーバーfor chrome"で実行しましたが、うまくいきません。テキストファイル1つでpの内容を変更する

これはコードです:私はそれをロードする際

<!DOCTYPE html> 
<html> 
<body> 

<div><h2 id="demo">Lets change this text</h2></div> 

<button type="button" onclick="loadDoc()">Change Content</button> 
<script  
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script> 
<script> 
function loadDoc() { 
    $.get("hello.txt",function(data){ 
    getElementById('demo').innerText= data; 
    }); 
} 
</script> 

</body> 
</html> 

は、pとボタンが表示されますが、私は何も起こりません]ボタンをクリックしたときに、 .htmlファイルと.txtファイルは同じフォルダにあります。 私は何日もそれに固執していました。助けてください、そしてそれを重複としてマークしないでください。

助けていただければ幸いです。あなたが委任方法on()

$(document).on('click','<your_button_selector>', function(){ 
    alert("hello") // replace and put your code here 
}); 

幸運でクリックバインドする必要があり、そのボタンについて

function loadDoc() { 
    $.get("hello.txt",function(data){ 
     $('#demo').html(data); 
    }); 
} 

下に述べたように

+0

JSFIddleにurコードを記述できますか?あなたの問題を簡単にデバッグすることができます。 .txtファイルに機密コンテンツが含まれている場合は、ダミーのコンテンツを入れてリンクを共有してください。 – Smit

+0

コードは上記のものに過ぎません。https://jsfiddle.net/tvgsx45g/#&togetherjs=SUJmCrpHql – Muccagelato

+0

皆さんありがとうございます。 – Muccagelato

答えて

1

function loadDocWithHttp() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("demo").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", "hello.txt", true); 
    xhttp.send(); 
} 
+0

ありがとう、私は将来の参照のためにそれを使用します – Muccagelato

1

まず第一には、スクリプト内の1つの変更を行います..!

function loadDoc() { 
    $.get("hello.txt",function(data){ 
    document.getElementById('demo').text= data; 
    }); 
} 

または

function loadDoc() { 
    $.get("hello.txt",function(data){ 
    document.getElementById('demo').innerHTML= data; 
    }); 
} 

あなたはjQueryのAjaxの機能を使用することができます。

1

この

 function loadDoc() { 
       $.ajax({ 
        url : "hello.txt", 
        dataType: "text", 
        success : function (result) { 
         $("#demo").html(result); 
        } 
       }); 
    } 
1

はこれを試してみてくださいしてみてください。使用AJAX

<div><h2 id="demo">Lets schange this text</h2></div> 

    <button type="button" onclick="loadDoc()">Change Content</button> 
<button type="button" onclick="loadDocWithHttp()">Change Content from Http request</button> 

:あなたはこのout

<script> 
function loadDoc() { 
    $.get("hello.txt",function(data){ 
    document.getElementById('demo').innerHTML= data; 
    }); 
} 

</script> 

HTMLを試みることができる

$.ajax({ 
      url: "./seeds/hello.txt", 
      async: false, 
      success: function (data){ 
       pageExecute.fileContents = data; 
      }, 
      error: function (e){ 
       //error print 
      } 
     }); 
1

代わりerror属性は例外を取得するために参考になります下の行に

getElementById('demo').innerText= data;

変化。

document.getElementById('demo').innerText= data; 
0

1.あなたのブラウザのhttp://url/hello.txtを閲覧できますか?

2.開発ツールを開くとエラーが表示されますか?

3。ドキュメントの下でgetElementByIdを使用する必要があります。オブジェクト

関連する問題