0

I'm trying to send data through AJAX to a PHP file to then upload to my database using SQL. I've already altered my table to allow UTF-8 to be inserted. When I insert using a form it works fine but when using AJAX to send data it won't send it.

For example, I'm trying to send some text and an emoji to a PHP file which then uploads to my database.

I've already got <meta charset="utf-8"> at the top of my page and even added header("Content-Type: text/html; charset=utf-8"); to the page and PHP file as I've seen some other posts mention that but it hasn't worked.

Here is the AJAX function:

$detail = $('#post').text(); //Gets text from div

$.ajax({
    url: 'edit.php',
    type: 'post',
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    data: {detail: $detail},
    datatype: 'html',
    success: function() {
        console.log($detail);
}});

The $detail is simply the value from a div and all the edit file simply does is UPDATE the table.

When I console.log the data it comes back with text and an emoji but it doesn't insert into my database.

While writing this, I noticed that adding 'application/x-www-form-urlencoded;charset=utf-8' stops the whole process from working but I'm not sure why.

Backend Code for those that asked:

<?php
$host = "hostname";
$user = "user";
$password = "pass";
$db_name = "database";
$tbl_name = "table";

// Connect to server and select databse.
$conn = mysqli_connect($host, $user, $password)or die("cannot connect");
mysqli_select_db($conn, $db_name)or die("cannot select DB");

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $detail = $_POST['detail'];

    // Add your validation and save data to database
    if(strlen($detail) <= 5000) {
        $stmt = mysqli_stmt_init($conn);

        $sql = "UPDATE $tbl_name SET detail = ?";
        if (mysqli_stmt_prepare($stmt, $sql)) {
            mysqli_stmt_bind_param($stmt, "s", $detail);
            mysqli_stmt_execute($stmt);
        }
        mysqli_stmt_close($stmt);
    }
}
?>

NOTE: This works when I pass it through a form but via AJAX when adding an emoji such as it doesn't work.

TheWelshManc
  • 495
  • 3
  • 13
  • 3
    For the insert we'd need to see the PHP code. My guess is `$detail` isn't what you expect it to be. The content type your are stating is the default for jQuery AJAX, so if there are no errors in the console, this is going to be hard to troubleshoot. – Jay Blanchard Jan 04 '19 at 15:55
  • It would be good also to see HTTP request from debugger in browser. – Dejan Jan 04 '19 at 15:56
  • @JayBlanchard I edited my post so you can see the backend. No errors appear in console. `$detail` appears exactly how it's supposed to be and the whole thing works fine until I set `contentType`. – TheWelshManc Jan 04 '19 at 16:06
  • You do know your update statement is going to populate every row in the table, right? – Jay Blanchard Jan 04 '19 at 16:08
  • Yes I've only got one in there for testing purpose. – TheWelshManc Jan 04 '19 at 16:09
  • Show us what is in `$detail` and how you set it. Remove content type and set datatype to 'text' – Jay Blanchard Jan 04 '19 at 16:10
  • No detail isn't a PHP variable. When I learned how to use AJAX I've always used $ to declare a variable to pass into data. – TheWelshManc Jan 04 '19 at 16:12
  • Side note: You realize that you're updating your entire database without a `WHERE` clause, right? – Funk Forty Niner Jan 04 '19 at 16:14
  • @FunkFortyNiner https://stackoverflow.com/questions/54042223/ajax-post-with-utf-8?noredirect=1#comment94920178_54042223 – Jay Blanchard Jan 04 '19 at 16:15
  • Yes I already mentioned that @FunkFortyNiner – TheWelshManc Jan 04 '19 at 16:15
  • Note: The object-oriented interface to `mysqli` is significantly less verbose, making code easier to read and audit, and is not easily confused with the obsolete `mysql_query` interface. Before you get too invested in the procedural style it’s worth switching over. Example: `$db = new mysqli(…)` and `$db->prepare("…")` The procedural interface is an artifact from the PHP 4 era when `mysqli` API was introduced and should not be used in new code. – tadman Jan 04 '19 at 16:20
  • Are you trying to insert an emoji? – Funk Forty Niner Jan 04 '19 at 16:23
  • Yes, when I add text without an emoji it works fine. When I add an emoji such as , it doesn't process. – TheWelshManc Jan 04 '19 at 16:24
  • I'd try and add UTF-8 to the connection. Also, emoji requires the column type to be a BLOB. – Funk Forty Niner Jan 04 '19 at 16:27
  • I've already done that and it doesn't require it to be a blob as when I submit the data via a form and not ajax it works fine. – TheWelshManc Jan 04 '19 at 16:28
  • 1
    You know that MySQL's default UTF8 isn't actual UTF8, right? If you want to store emoji you need to use utfmb4 for full UTF8 support. – Sammitch Jan 04 '19 at 16:30
  • Yes all my columns are utf8mb4. – TheWelshManc Jan 04 '19 at 16:31
  • Last ditch effort; check the file(s) encoding. They should all be UTF-8. Note that UTF-8 encoding has a few; with and without BOM (byte order mark). The connection too as I mentioned earlier; see https://stackoverflow.com/q/279170/ – Funk Forty Niner Jan 04 '19 at 16:36

1 Answers1

0

Add mysqli_set_charset($conn, 'utf8mb4'); to all php files after connecting to database.

TheWelshManc
  • 495
  • 3
  • 13