参考“51CTO观看DAPP”开发实战,因为视频教程为早期录制,在学习编写过程中与当前WEB3.js版本不同,在浏览器执行过程中出现了多个方法找不到,附源码,还请指教那些方法需要修改,能尽快跑通。
<html>
<head>
<meta charset="UTF-8">
<title>First DAPP Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
</head>
<body>
<div class="container">
<h1>First DAPP Demo</h1>
<h2 id="info"></h2>
<label>姓名:</label>
<input id="name" type="text">
<label>年龄:</label>
<input id="age" type="text">
<button id="button">更新内容</button>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
console.log("web3:" + web3);
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
//得到合约变量
var infoContract = new web3.eth.Contract([{
"constant": true,
"inputs": [],
"name": "getInfo",
"outputs": [{
"name": "",
"type": "string"
},
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": false,
"inputs": [{
"name": "_name",
"type": "string"
},
{
"name": "_age",
"type": "uint256"
}
],
"name": "setInfo",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
}
]);
var info = infoContract.at('0xda873b8dd76c861723e869269bc13a5a2999208f');
info.getInfo(function(error, result) {
if (!error) {
$("#info").html(result[0] + ' ( ' + result[1] + ' years old )');
}
});
$("#button").click(function() {
var name = $("#name").var();
var age = $("#age").var();
info.setInfo(name, age, function(error, result) {
if (!error) {
console.console.log("set ok");;
}
})
});
</script>
</body>
</html>