javascript - HTML不会在区块链智能合约中检索或添加任何数据(HTML doesn't retrieve or add any data in blockchain smartcontract)

Question

Why the following codes doesn't work all together?

(为什么以下代码不能一起使用？)

It doesn't show any data in the HTML interface.

(它在HTML界面中不显示任何数据。)

It's a blockchain.

(这是一个区块链。)

Ethereum The two things that it does are, through HTML form and JavaScript, a function here adds an artifact in blockchain (with properties that are entered by the user through HTML interface), and with another HTML form, the state of the artifact is changed (by the user through HTML interface).

(以太坊它做的两件事是通过HTML表单和JavaScript，这里的一个函数在区块链中添加了一个工件（具有用户通过HTML界面输入的属性），而另一个HTML表单则改变了工件的状态。 （由用户通过HTML界面）。)

historicalArtifact.sol

(historyArtifact.sol)

pragma solidity ^0.4.2;

contract historicalArtifacts {
    // Model a historical artifact
    struct Artifact {
        uint id;
    string name;
        string object;
    string state;
    }
///////////////////////
 //struct Action {
    // @dev Instant of time when the Action is done.
   // uint timestamp;
    // @dev Block when the Action is done.
 //   uint blockNumber;
 // }
//////////////////////

    // Store accounts that submitted
    mapping(address => bool) public submitters;
    // Read/write artifacts
    mapping(uint => Artifact) public artifacts;
    // Store artifacts count
    uint public artifactsCount;

    // //sumbmit event
    event updatedEvent (
        uint indexed _artifactId
    );

     function historicalArtifacts () public {
     addArtifact("Historical Artifact 1","sss","ss");
     addArtifact("Historical Artifact 2","sss","ss");

    }

    function addArtifact (string _name,string _object, string _state) public {
        artifactsCount ++;
        artifacts[artifactsCount] = Artifact(artifactsCount,_name, _object, _state);
    }




  //uint value;
 // mapping (uint256 => Artifact) public  datamatching;

 // function getData(uint256 id) returns (uint, string, string, string){
 //   return (datamatching[id].id, datamatching[id].name, datamatching[id].object ,datamatching[id].state);
 //  }

 //   function storedata (uint _id, string _state) private {
 //   action.timestamp = now;
 //   action.blockNumber = block.number;
 //   var  artifactdata  = datamatching[value];
 //   artifactdata.state = state;
  //  }



 function updateState (uint _artifactId, string _artifactstate) public {
        // require that they haven't submitted before
        //require(!submitters[msg.sender]);

        // require a valid historical artifact
        require(_artifactId > 0 && _artifactId <= artifactsCount);

        // record that submitter has submitted
        submitters[msg.sender] = true;

        // update artifact location
        artifacts[_artifactId].state= _artifactstate ; //


        updatedEvent(_artifactId);
     }


}

App.js

(App.js)

App = {
  web3Provider: null,
  contracts: {},
  account: '0x0',

  init: function() {
    return App.initWeb3();
  },

  initWeb3: function() {
    if (typeof web3 !== 'undefined') {
      // If a web3 instance is already provided by Meta Mask.
      App.web3Provider = web3.currentProvider;
      web3 = new Web3(web3.currentProvider);
    } else {
      // Specify default instance if no web3 instance provided
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
      web3 = new Web3(App.web3Provider);
    }
    return App.initContract();
  },

  initContract: function() {
    $.getJSON("historicalArtifacts.json", function(historicalArtifacts) {
      // Instantiate a new truffle contract from the artifact
      App.contracts.historicalArtifacts = TruffleContract(historicalArtifacts);
      // Connect provider to interact with contract
      App.contracts.historicalArtifacts.setProvider(App.web3Provider);
    App.listenForEvents();
      return App.render();
    });
  },
listenForEvents: function() {
  App.contracts.historicalArtifacts.deployed().then(function(instance) {
    instance.updatedEvent({}, {
      fromBlock: 0,
      toBlock: 'latest'
    }).watch(function(error, event) {
      console.log("event triggered", event)
      // Reload when a new state is recorded
      App.render();
    });
  });
},

  render: function() {
    var historicalArtifactsInstance;
    var loader = $("#loader");
    var content = $("#content");

    loader.show();
    content.hide();

    // Load account data
    web3.eth.getCoinbase(function(err, account) {
      if (err === null) {
        App.account = account;
        $("#accountAddress").html("Your Account: " + account);
      }
    });

    // Load contract data
    App.contracts.historicalArtifacts.deployed().then(function(instance) {
      historicalArtifactsInstance = instance;
      return historicalArtifactsInstance.artifactsCount();
    }).then(function(artifactsCount) {
      var artifactsResults = $("#artifactsResults");
      artifactsResults.empty();

    var artifactsSelect = $('#artifactsSelect');
    artifactsSelect.empty();


      for (var i = 1; i <= artifactsCount; i++) {
        historicalArtifactsInstance.artifacts(i).then(function(artifact) {
          var id = artifacts[0];
          var name = artifacts[1];
          var object = artifacts[2];
          var state = artifacts[3];
          // Render artifact Result
          var artifactTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + Object Type + "</td></tr>" + Current State + "</td></tr>";
          artifactsResults.append(artifactTemplate);

  // Render artifact ballot option
        var artifactOption = "<option value='" + id + "' >" + name + "</ option>";//
        artifactsSelect.append(artifactOption);
        });
      }

 return historicalArtifactsInstance.submitters(App.account);
  }).then(function(hasUpdated) {
    // Do not allow a user to update
    if(hasUpdated) {
      $('form').hide();
    }

      loader.hide();
      content.show();
    }).catch(function(error) {
      console.warn(error);
    });
  },
castUpdate: function() {
    var artifactId = $('#artifactsSelect').val();
    var artifactstate = $('#cstate').val();
    App.contracts.historicalArtifacts.deployed().then(function(instance) {
      return instance.updateState(artifactId, artifactstate ,{ from: App.account });
    }).then(function(result) {
      // Wait for state to update
      $("#content").hide();
      $("#loader").show();
    }).catch(function(err) {
      console.error(err);
    });
  }
};

addha: function() {
    var name = $('#aName').val();
    var object = $('#aObject').val();
var state = $('#aState').val();
    App.contracts.historicalArtifacts.deployed().then(function(instance) {
      return instance.addArtifact(name, object , state, { from: App.account });
    }).then(function(result) {
      // Wait for state to update
      $("#content").hide();
      $("#loader").show();
    }).catch(function(err) {
      console.error(err);
    });
  }
};


$(function() {
  $(window).load(function() {
    App.init();
  });
});

index.html

(index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Historical Artifacts</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" style="width: 650px;">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="text-center">Historical Artifacts</h1>
          <hr/>
          <br/>

                    <div id="content">
            <h4 id="aName"></h4>
        <h4 id="aObject"></h4>
        <h4 id="aState"></h4>

            <hr/>
            <form role="form" onSubmit="App.addha(); return false;">
              <div class="form-group" style="display:inline;">
                <div class="input-group">
                  <input class="form-control input-lg" id="aName" placeholder="Historical Artifact Name">
                  </input>
        <input class="form-control input-lg" id="aObject" placeholder="Historical Artifact Object">
                  </input>
        <input class="form-control input-lg" id="aState" placeholder="Historical Artifact State">
                  </input>
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary btn-lg">Add Historical Artifact</button>
                  </span>
                </div>
              </div>
            </form>
          </div>








          <div id="loader">
            <p class="text-center">Loading...</p>
          </div>
          <div id="content" style="display: none;">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
              <th scope="col">Object type</th>
                  <th scope="col">Current State</th>
                </tr>
              </thead>
              <tbody id="artifactsResults">
              </tbody>
            </table>
            <hr/>
            <p id="accountAddress" class="text-center"></p>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>
  </body>

<form onSubmit="App.castUpdate(); return false;">
  <div class="form-group">
    <label for="artifactsSelect">Select Historical Artifact</label>
    <select class="form-control" id="artifactsSelect">
    </select>
  <input type="text" id="cstate" placeholder="State"><br>
<?php $hstate = $_post['cstate'] ?>
  </div>
  <button type="submit" class="btn btn-primary">Update</button>

  <hr />
</form>



</html>

  ask by Solb translate from so

Answer 1

等待大神答复