Question

我有一个表单，我希望当有人点击提交，运行upis.js写谢谢你的消息并运行php脚本插入数据库。现在它需要我可以在我的网址中看到它们的值，但它不会运行upis.php。你能告诉我为什么吗？以下是表单的代码：

<script>
function upis(){

    var ime = document.getElementById("ime").value;
    var prezime = document.getElementById("prezime").value;
    var ime_slavljenik = document.getElementById("ime_slavljenik").value;
    var prezime_slavljenik = document.getElementById("prezime_slavljenik").value;
    var email = document.getElementById("email").value;

    var dataString = "ime="+encodeURIComponent(ime)+"&prezime="+encodeURIComponent(prezime)+"&ime_slavljenik="+encodeURIComponent(ime_slavljenik)+"&prezime_slavljenik="+encodeURIComponent(prezime_slavljenik)+"&email="+encodeURIComponent(email);

    $.ajax({
        type:"post",
        url: "upis.php",
        cashe: false,
        data: dataString,
        success: function(data){
            //window.alert(data);
            document.getElementById("placefortableanketa").innerHTML = data;
        },
            error: function (req, status, err) {
            console.log('Something went wrong', status, err);
        }
    })
    return false;
}
</script>

和upis.js

<?php

require_once 'include/db.php';
require_once 'include/functions.php';

$allowed_params = allowed_post_params(['ime', 'prezime', 'ime_slavljenik', 'prezime_slavljenik', 'email','submit']);
// niz sadrzi dozvoljene maksimalne duzine za sva polja
$fields_lengths = ['ime' => 64, 'prezime' => 64, 'ime_slavljenik'=>64, 'prezime_slavljenik'=>64, 'email' => 64];

// provera da li su polja odgovoarajuce duzine
foreach ($fields_lengths as $field => $length) {
    if (!has_length($_POST[$field], ['min' => 0, 'max' => $length])) {
        header('Location: greska.html');
        die();
    }
}


try {
    // Priprema upita za unos podataka u bazu
    $prep = $db->prepare("INSERT INTO prijavljeni (ime, prezime, ime_slavljenik, prezime_slavljenik, email) VALUES(:ime, :prezime, :ime_slavljenik, :prezime_slavljenik, :email)");
    $prep->bindParam(':ime', $ime);
    $prep->bindParam(':prezime', $prezime); 
    $prep->bindParam(':ime_slavljenik', $ime_slavljenik);
    $prep->bindParam(':prezime_slavljenik', $prezime_slavljenik);
    $prep->bindParam(':email', $email);


    $ime = isset($allowed_params['ime']) ? $allowed_params['ime'] : "";
    $prezime = isset($allowed_params['prezime']) ? $allowed_params['prezime'] : "";
    $ime_slavljenik = isset($allowed_params['ime_slavljenik']) ? $allowed_params['ime_slavljenik'] : "";
    $prezime_slavljenik = isset($allowed_params['prezime_slavljenik']) ? $allowed_params['prezime_slavljenik'] : "";
    $email = isset($allowed_params['email']) ? $allowed_params['email'] : "";


    // izvrsavanja upita
    $rez = $prep->execute();
    $htmltable = "Hvala na poslatoj prijavi.";
    echo $htmltable;
} catch (PDOException $e) {
    echo 'greska kod upita';

}


?>

和upis.php

 <div class="sorting">

    <h4 class="d-inline">Start Date</h4>
    <input type = "text" id="start" />
    <h4   class="d-inline">End Date</h4>
    <input type = "text" id="end"/>
    <button type ="button" onclick="onClick()" class="btn btn-primary">Submit</button>
    <div class="filters float-right d-inline">
        <h5 class="d-inline">TRIBES &nbsp;</h5>
        <select class="dropdown" name="date-filter" id="date-filter" onchange="updateBarChart()">
            <option>Early Morning</option>
            <option>Wh</option>
            <option>Tribe 3</option>
            <option>Tribe 4</option>
        </select>
    </div>
</div>

我无法看到这里有什么问题，因为js从表单获取值但实际上并没有运行upis.php（它不需要url upis.php）我不明白为什么..

Answer 1

如果您使用Firefox或Chrome开发应用程序，请查看Web检查器的网络选项卡，以确保JavaScript资源成功发送XHR请求。检查POST XHR请求发送到的URL。

是否在AJAX设置的url属性中正确设置了URL？

您可能需要预先添加＆＃34; upis.php＆＃34;正斜杠，例如＆＃34; /upis.php"

Answer 2

你应该从index.php调用脚本，你错过了表单中的动作和方法

<form action="upis.php" method="post">
            <label>Ime</label>
            <input type="text" name="ime" id="ime" required><br>
            <label>Prezime</label>
            <input type="text" name="prezime" id="prezime" required><br>
            <label>Ime slavljenika</label>
            <input type="text" name="ime_slavljenik" id="ime_slavljenik" required><br>
            <label>Prezime slavljenika</label>
            <input type="text" name="prezime_slavljenik" id="prezime_slavljenik" required><br>
            <label>Kontakt email</label>
            <input type="email" name="email" id="email" required>
            <button onclick="return upis()">Posalji</button>
            <div id="placefortableanketa">
            </div><br><br>
        </form>

显示＆＃34;感谢信息＆＃34;使用AJAX并运行php脚本

2 个答案: