Question

我是java-script的初学者，我想使用java-script将我的值发送到另一个页面。

我的代码：

<form  id="contact-form" method="post" enctype="multipart/form-data">              
   <fieldset>
       <label><span class="text-form">name</span><input name="name"  type="text" /></label>
       <label><span class="text-form">email</span><input  type="text" /></label>   
       <label><span class="text-form">phone</span><input  name="mobile" type="text" /></label>     
       <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
            <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
            <a class="button"href="savenazar.php" onClick="document.getElementById('contact-form').submit()">send</a>
        </div>                             
     </fieldset>                        
  </form>

现在如何在savenazar.php页面中获取姓名，电话号码？

Answer 1

您需要在表单中添加action="savenazar.php"属性，并使用<input type="submit">代替<a>。电子邮件文本框还需要name="email"属性

<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >                    
    <fieldset>
        <label><span class="text-form">name</span><input name="name"  type="text" />
        </label>
        <label><span class="text-form">email</span><input name="email" type="text" /></label>   
        <label><span class="text-form">phone</span><input name="mobile" type="text" /></label>     
        <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <input type="submit" class="button" value="send" />
        </div>  
    </fieldset>    
</form>

然后在savenazar.php中，您可以使用$_POST["x"]获取值，其中x是您要获取的输入标记的name属性。例如，您可以按$_POST["name"]获取名称，因为名称文本框具有name="name"属性。您可以$_POST["email"]收到电子邮件，因为电子邮件文本框具有name="email"属性。您可以$_POST["mobile"]拨打电话，因为电话文本框具有name="mobile"属性，依此类推。

或者您也可以使用<a>标记，就像您之前的代码一样，并在下面的评论中将href属性设置为#，如@Ghost所述

<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >                    
    <fieldset>
        <label><span class="text-form">name</span><input name="name"  type="text" />
        </label>
        <label><span class="text-form">email</span><input name="email" type="text" /></label>   
        <label><span class="text-form">phone</span><input name="mobile" type="text" /></label>     
        <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
        <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <a class="button" href="#" onClick="document.getElementById('contact-form').submit()">send</a>
        </div>  
    </fieldset>    
</form>

Answer 2

以下代码将帮助您实现所需的功能，并通过AJAX实现，因此无需刷新页面

<form  id="contact-form" method="post" enctype="multipart/form-data">              <fieldset>
   <label><span class="text-form">name</span><input name="name"  id="name" type="text" /></label>
   <label><span class="text-form">email</span><input id="email" type="text" /></label>   
   <label><span class="text-form">phone</span><input id="mobile" name="mobile" type="text" /></label>     
   <div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
    <div class="buttons">
        <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
        <a class="button id="submit">send</a>
    </div>                             
 </fieldset>                        
  </form>

将以下js添加到您的文件中或包含它

$('#submit').click(function() {
name = document.getElementById('name').value;
email = document.getElementById('email').value;
mobile = document.getElementById('mobile').value;
$.post('savenazar.php', {'name': name, 'email': email, 'mobile'" mobile}, function(data) {

   var parsed = JSON.parse(data);

    var html = 'HTML to show when data is passed';
<!-- following are your divs -->
$('#requestStatus').append(html);
 }).success(function() {
    $('#comment').val('');
    $('#sentSuccess').html('data Sent!').show().delay(5000).fadeOut();
}).fail(function() {
    $('#sentFailed').html('data not sent').show().delay(5000).fadeOut();
});

});

//在savenazar.php

<?php
$name = $_GET['name'];

Answer 3

您需要一些服务器端编程知识，在本例中为PHP。

应该认真对待POST数据服务器端，因为这很容易成为大多数新网站中最突出的安全漏洞。

查看POST数据的简单PHP脚本是：

<?php

if ($_POST) {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

?>

在确保客户端输入的有效性时必须采取“安全措施”

防止SQL注入（如果在MySQL中存储使用mysqli_real_escape_string()）
Form Flooding（Captcha是最受欢迎的选择）

根据ekad添加的内容，您可以使用$_POST['name']等

访问POST数据

我建议您查找一些初学者教程，这是一个很好的入门教程：PHP Forms

如何在表单中使用javascript时获取值

3 个答案: