送信フォームにウェブサイトの一部を再読み込みするにはどうすればよいですか？

こんにちは私は私のウェブサイトにツリーパーツを持っています：パート1 d3.jsのスクリプト、パート2はhtmlフォーム、パート3はanguir jsグリッドUIです。私はパート1を提出フォームreladをクリックすると、私はそれを行うことができますか？何か案が？送信フォームにウェブサイトの一部を再読み込みするにはどうすればよいですか？

<html> 
<head></head> 
<body></body> 

<script> Part I </script> 
<form> Part II </form> 
<script> Part III </script> 

</html>

パート1：

<script> 
    var margin = {top: 20, right: 200, bottom: 100, left: 50}, 
     margin2 = { top: 430, right: 10, bottom: 20, left: 40 }, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom, 
     height2 = 500 - margin2.top - margin2.bottom; 

    var parseDate = d3.time.format("%Y%m%d").parse; 
    var bisectDate = d3.bisector(function(d) { return d.date; }).left; 

    var xScale = d3.time.scale() 
     .range([0, width]), 

     xScale2 = d3.time.scale() 
     .range([0, width]); // Duplicate xScale for brushing ref later 

    var yScale = d3.scale.linear() 
     .range([height, 0]); 

    // 40 Custom DDV colors 

     var color = d3.scale.ordinal().range(["#FAAC58", "#3ADF00", "#9A2EFE", "#58ACFA", "#848484", "#FE2E2E"]); 


    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom"), 

     xAxis2 = d3.svg.axis() // xAxis for brush slider 
     .scale(xScale2) 
     .orient("bottom");  

    var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left"); 
</script>

パート2：

<form action = "http://localhost:5000/result" method = "POST"> 
     <p>Part: <span ng-bind="entityRowPart"></span></p> 
     <p>Loc: <span ng-bind="entityRowLoc"></span></label></p> 
     <p>Avg: <input type = "text" name = "Avg" ng-model="entityRowMean"/></p> 
     <p>Std: <input type = "text" name = "Std" ng-model="entityRowStd"/></p> 
     <p>Lead Time: <input type = "text" name = "leadTime" value="5"/></p> 
     <p>Service Level: <input type ="text" name = "serviceLevel" value="95"/></p> 
     <p>Simulation num days: <input type ="text" name = "numdays" value="10"/></p> 
     <p><input type = "submit" value = "Submit"/></p> 
    </form>

パート3

<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="grid"></div>

出典

2017-02-03 Joan Triay

あなたは、AJAXを使用して、ウェブサイトの一部を変更することができます。 Here詳細はとhereです。デモを見ることができます。

EDIT：このコードに関する例を追加しました。

function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("part1").innerHTML = 
     this.responseText; 
    } 
    }; 
    xhttp.open("GET", "THECODEOFYOURPART1", true); 
    xhttp.send(); 
}

フォーム上の[送信]をクリックすると、loadDoc()をトリガしなければならないので、同様に最初の部分は、htmlタグで宣言されたIDを持つ必要があります

<script id="part1"></script>

出典

2017-02-03 11:53:46 Titulum

私は変更したくないだけ私はリロードしたいです、フリーリスト部分@Titulum –

私は問題が表示されません。 ajaxを使用すると、最初の部分を簡単にリロードできます。 – Titulum

リロードの例を教えてもらえますか？ –

送信フォームにウェブサイトの一部を再読み込みするにはどうすればよいですか？

答えて

関連する問題