Question

您好我是JavaScript新手，正在寻求帮助。我有一张表格，如下所示。当用户提供输入并单击提交时，我想调用一个php文件（如下所示）来调用并返回一个问候语。这是我尝试过的代码，虽然它没有按预期工作。

 <html>
<head>
 <script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text"  />
<input id="name-submit" type="submit" value="submit" onclick="post()"/>
</form>
<div id="result"></div>
</body>
<script>
function post() {
 var hname = $('input#name-typed').val();
 $.post('dat.php',{name: hname},function(data) {
$('div#result').html(data);
});
  }
</script>
</html>

PHP文件dat.php如下所示： <?php echo "hello";?>

正如我的第一段所述，任何人都可以提出我应该做出的任何改变吗？

Answer 1

我没有测试，但是这样：

$('form').submit(function(){
post()
return false;//block the reload of the page
})

事实上，我认为你只是忘记了返回虚假。如果您使用我的答案，则取消onclick

Answer 2

试试这个：

你可以改变dat.php说：

<?php

$name = $_POST['name'];
echo "Hello ".$name;

?>

然后你的html文件将是：

请注意，按钮类型已更改为普通按钮，因此它只是执行功能而不是提交表单。

<html>
<head>
 <script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text"  />
<button type="button" onclick="post()">Submit</button>
</form>
<div id="result"></div>
</body>
<script>
function post() {
  $.ajax({
         type: "POST",
        url: "dat.php",
        data: { name: $('#name-typed').val()
             },
        success: function(response) {

                $('#result').html(response);
       }
    });
}

</script>
</html>

如何从javascript调用php文件？

2 个答案: